Learn html - html tutorial - Globalcompositeoperation property in html5 canvas - html examples - html programs
The globalCompositeOperation is a property of <canvas> element in composition.
The globalCompositeOperation property sets how a source image are drawn onto a destination image.
source image = drawings are about to place onto the canvas.
destination image = drawings are already placed onto the canvas.
Syntax for globalCompositeOperation Property in HTML5 Canvas:
context.globalCompositeOperation="source-in";
Property values for globalCompositeOperation Property in HTML5 Canvas:
Values
Description
source-over
Shows the source image over the destination image.
source-atop
Shows the source image on top of the destination image. The part of the source image that is outside the destination image is not displayed.
source-in
Shows the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is displayed, and the destination image is transparent
source-out
Shows the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is displayed, and the destination image is transparent
destination-over
Shows the destination image over the source image
destination-atop
Shows the destination image on top of the source image.
destination-in
Shows the destination image in to the source image.
destination-out
Shows the destination image out of the source image.
lighter
Shows the source image + the destination image
copy
Shows the source image. The destination image is ignored
xor
The source image is grouped by using an exclusive OR with the destination image
Sample Coding for globalCompositeOperation Property in HTML5 Canvas: