JavaScript: The Definitive Guide, 5th Edition

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 else is made transparent.
“source-out” ...