HTML canvas globalCompositeOperation Property
HTML canvas globalCompositeOperation Property
The globalCompositeOperation property is used to define how a new (source) image is drawn onto an existing (destination) image.
source image = new drawings.
destination image = already present drawings on canvas
Syntax:-
Its syntax is- context.globalCompositeOperation = source-in;
Further Explanation:-
| Value | Description |
|---|---|
| source-over | Default. Displays the source image over the destination image. |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown |
| source-in | Displays the source image into the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent |
| destination-over | Displays the destination image over the source image |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown |
| destination-in | Displays the destination image into the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent |
| lighter | Displays the source image + the destination image |
| copy | Displays the source image. The destination image is ignored |
| xor | The source image is combined by using an exclusive OR with the destination image |
Code Explanation
All Tutorials related to Canvas Methods and Properties
canvas fillStyle Property in HTML
canvas strokeStyle Property in HTML
canvas shadowColor Property in HTML
canvas shadowBlur Property in HTML
canvas shadowOffsetX Property in HTML
canvas shadowOffsetY Property in HTML
canvas createLinearGradient() Method in HTML
Canvas createPattern() Method in HTML
canvas createRadialGradient() Method in HTML
canvas addColorStop() Method in HTML
HTML canvas lineCap Property
canvas stroke() Method in HTML
canvas beginPath() Method in HTML
canvas moveTo() Method in HTML
HTML canvas closePath() Method
canvas lineTo() Method in HTML
canvas clip() Method in HTML
HTML canvas quadraticCurveTo() Method
HTML canvas bezierCurveTo() Method
canvas arc() Method in HTML
HTML canvas arcTo() Method
canvas isPointInPath() Method in HTML
HTML canvas lineJoin Property
canvas lineWidth Property in HTML
canvas miterLimit Property in HTML
canvas rect() Method in HTML
HTML canvas fillRect() Method
canvas strokeRect() Method in HTML
HTML canvas clearRect() Method
canvas fill() Method in HTML
canvas scale() Method in HTML
HTML canvas rotate() Method
canvas translate() Method in HTML
canvas transform() Method in HTML
canvas setTransform() Method in HTML
canvas font Property in HTML
canvas textAlign Property in HTML
canvas textBaseline Property in HTML
canvas fillText() Method in HTML
canvas strokeText() Method in HTML
canvas measureText() Method in HTML
canvas drawImage() Method in HTML
canvas ImageData width Property in HTML
canvas ImageData height Property in HTML
canvas ImageData data Property in HTML
canvas createImageData() Method in HTML
canvas getImageData() Method in HTML
canvas putImageData() Method in HTML
canvas globalAlpha Property in HTML
canvas globalCompositeOperation Property in HTML
