HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Canvas Object : Draw rectangles using two different globalCompositeOperation values. Red rectangles are destination images. Blue rectangles are source images
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image.
Default value: | source-over |
---|---|
JavaScript syntax: | context.globalCompositeOperation = "source-in"; |
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 » |
All the globalCompositeOperation property values:
❮ Canvas Object