YouTipProp Canvas Globalcompositeoperation
# HTML canvas globalCompositeOperation Property
[ Canvas Object](#)
## Example
Draw rectangles using different globalCompositeOperation values. The red rectangle is the _destination image_, the blue rectangle is the _source image_:
source-over
destination-over
YourbrowserdoesnotsupporttheHTML5canvastag.
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 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 image you intend to place on the canvas.
_Destination image =_ The image that is already placed on the canvas.
| Default value: | source-over |
| --- |
| JavaScript syntax: | _context_.globalCompositeOperation="source-in"; |
## Property Values
| Value | Description |
| --- | --- |
| source-over | Default. The source image is placed _on top of_ the destination image. |
| source-atop | The source image is placed _on top of_ the destination image. The part of the source image that is outside the destination image is not visible. |
| source-in | The source image is placed _inside_ the destination image. Only the part of the source image that is inside the destination image is visible. The destination image is transparent. |
| source-out | The source image is placed _outside_ the destination image. Only the part of the source image that is outside the destination image is visible. The destination image is transparent. |
| destination-over | The destination image is placed _on top of_ the source image. |
| destination-atop | The destination image is placed _on top of_ the source image. The part of the destination image that is outside the source image is not visible. |
| destination-in | The destination image is placed _inside_ the source image. Only the part of the destination image that is inside the source image is visible. The source image is transparent. |