Example
Draw rectangles using two different globalCompositeOperation values. Red rectangles are destination images. Blue rectangles are source images:
source-over
destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the globalCompositeOperation property.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
Definition and Usage
The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image.
class="notranslate"source image = drawings you are about to place onto the canvas.
destination image = drawings that are already placed onto the canvas.
| Default value: | source-over |
|---|---|
| JavaScript syntax: | context.globalCompositeOperation="source-in"; |
Property Values
| Value | Description | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | Play it » |
| 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 | Play it » |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | Play it » |
| 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 | Play it » |
| destination-over | Displays the destination image over the source image | Play it » |
| 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 | Play it » |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | Play it » |
| 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 | Play it » |
| lighter | Displays the source image + the destination image | Play it » |
| copy | Displays the source image. The destination image is ignored | Play it » |
| xor | The source image is combined by using an exclusive OR with the destination image | Play it » |
Example
All the globalCompositeOperation property values:
source-over:
source-atop:
source-in:
source-out:
destination-over:
destination-atop:
destination-in:
destination-out:
lighter:
copy:
xor: