Section 25.25. CanvasRenderingContext2D.globalCompositeOperation: specifies how colors are combined on the canvas

25.25. CanvasRenderingContext2D.globalCompositeOperation: specifies how colors are combined on the canvas

25.25.1. Synopsis

 String globalCompositeOperation 

25.25.2. 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"	The new shape is drawn where it doesn't overlap existing content.
"source-over"	The new shape is drawn on top of existing content. This is the default behavior.
"xor"	Shapes are made transparent where both overlap and drawn normal everywhere else.

25.25.3. Bugs

Firefox 1.5 does not support the values "copy" or "darker".