HTML canvas globalCompositeOperationProperty
Canvas ObjectExamples
Draw rectangles using different globalCompositeOperation values. The red rectangle is thedestination image, and the blue rectangle is thesource 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. On thedestination imagedisplay thesource image。 |
| source-atop | InDestination imageon top of it, display thesource image。The source image portionslocatedoutside the destination imageare invisible. |
| source-in | InWithin the destination imagedisplay thesource image. Onlythe parts of the source imagewithin thedestination imagewill be displayed,and the destination imageis transparent. |
| source-out | InOutside the destination imagedisplay thesource image. Onlythe parts of the source imageoutside thedestination imagewill be displayed,and the destination imageis transparent. |
| destination-over | InOn the source imagedisplay thedestination image。 |
| destination-atop | InSource imageon top of it, display thedestination image。The destination image portionslocatedoutside the source imageare invisible. |
| destination-in | InWithin the source imagedisplay thedestination image. Onlythe parts of the destination imagewithin thesource imagewill be displayed,and the source imageis transparent. |
| destination-out | InOutside the source imagedisplay thedestination image. Onlythe parts of the destination imageoutside thesource imagewill be displayed,and the source imageis transparent. |
| lighter | Display thesource image + + destination image。 |
| copy | Display thesource image. Ignore thedestination image。 |
| xor | Using an XOR operation,the source imageandand destination imageare combined. |
Other Extensions