Name
CanvasRenderingContext2D.globalCompositeOperation: specifies how colors are combined on the canvas
Synopsis
String globalCompositeOperation
Description
This property specifies how colors being rendered onto the canvas are combined (or âcompositedâ) with the colors that already exist in the canvas. The following table lists the possible values and their meanings. The word source in the these values refers to the colors being drawn onto the canvas, and the word destination refers to the existing colors on the canvas. The default is âsource-overâ.
Value |
Meaning |
âcopyâ |
Draws only the new shape, removing everything else. |
âdarkerâ |
Where both shapes overlap, the color is determined by subtracting color values. |
âdestination-atopâ |
Existing content is kept only where it overlaps the new shape. The new shape is drawn behind the content. |
âdestination-inâ |
Existing content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent. |
âdestination-outâ |
Existing content is kept where it doesnât overlap the new shape. Everything else is made transparent. |
âdestination-overâ |
The new shape is drawn behind existing content. |
âlighterâ |
Where both shapes overlap, the color is determined by adding the two color values. |
âsource-atopâ |
The new shape is drawn only where it overlaps existing content. |
âsource-inâ |
The new shape is drawn only where both the new shape and existing content overlap. Everything ... |
Get JavaScript: The Definitive Guide, 5th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.