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:
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:
Code Explanation for globalCompositeOperation Property in HTML5 Canvas:
“Wikitechy canvas” is used to define the value id attribute for canvas element.
The getElementById() method is used to get the canvas element that has the id attributes with the specified value.
gco.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
gcox.fillstyle() method is used to set the color to fill the drawing.
gcox.fillRect() method is used to draws a "filled" rectangle (30, 30, 85, 60);
gcox.globalCompositeOperation=”source-over” displays the source image over the destination image.
gcox.globalCompositeOperation=”destination-over” displays the destination image over the source image.
Sample Output for globalCompositeOperation Property in HTML5 Canvas:
The canvas rectangle with green color border.
Blue rectangle displays the source image over green rectangle the destination image.
Green rectangle displays the destination image over blue rectangle the source image.
Browser Support for globalCompositeOperation Property in HTML5 Canvas: