HTML canvas globalCompositeOperationProperty
Examples
Use different globalCompositeOperation values to draw rectangles. The red rectangle isthe destination image, and the blue rectangle isthe source image：
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);
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 is drawn onto a destination (existing) image.
source image =The drawing you intend to place onto the canvas.
destination image =The drawing you have already placed onto the canvas.
| Default value: | source-over |
|---|---|
| JavaScript syntax: | context.globalCompositeOperation="source-in"; |
Property Values
| Value | Description |
|---|---|
| source-over | Default. Onthe destination imagedisplaythe source image.。 |
| source-atop | InOn top of the destination imagedisplaythe source image.。The part of the source imagelocatedoutside the destination imageis not visible. |
| source-in | InIn the destination imagedisplaythe source image.. Onlythe destination imagewithinthe source imagepart will be displayed,the destination imageis transparent. |
| source-out | InOutside the destination imagedisplaythe source image.. Onlythe destination imageoutsidethe source imagepart will be displayed,the destination imageis transparent. |
| destination-over | InOn the source imagedisplaythe destination image.。 |
| destination-atop | InOn top of the source imagedisplaythe destination image.。The part of the destination imagelocatedoutside the source imageis not visible. |
| destination-in | InIn the source imagedisplaythe destination image.. Onlythe source imagewithinthe destination imagepart will be displayed,the source imageis transparent. |
| destination-out | InOutside the source imagedisplaythe destination image.. Onlythe source imageoutsidethe destination imagepart will be displayed,the source imageis transparent. |
| lighter | Displaythe source image + and the destination image.。 |
| copy | Displaythe source image.. Ignorethe destination image.。 |
| xor | Using XOR operation,the source imageandand the destination imageare combined. |
HTML canvas Reference Manual Other Extensions