HTML5 Canvas Globalcompositeoperation Drawing type explanation

We always draw one graph on top of another, and in most cases this is not enough. It is, for example, subject to the drawing order of the graph. However, we can use globalCompositeOperation attributes to change these practices.
globalCompositeOperation = type
Not only can we draw new graphics behind the existing graphs, we can also use them to cover and clear clearRect some areas (much more powerful than the method).

typeis one of the following 12 string values:

Note: In all the examples below, the blue squares are drawn first, i.e. "existing canvas content", and the red circle is drawn later, i.e. "new shape".

Source-over (default) This is the default setting and the new graphic will be overwritten with the original content.		Destination-over New graphics are drawn under the original content.
Source-in The new graphic will only appear in the part that overlaps with the original content. All other areas become transparent.		Destination-in The portion of the original content that overlaps with the new shape is retained, and the other areas become transparent.
Source-out The result is that only the parts of the new drawing that do not overlap the original content are drawn.		Destination-out Portions of the original content that do not overlap the new shapes are retained.
Source-atop The parts of the new drawing that overlap with the original content are drawn and overlaid on the original content.		Destination-atop Portions of the original content that overlap new content are retained and new graphics are drawn under the original content
Lighter The overlapping portions of the two graphs are added to the color processing.		Darker The overlapping portions of the two graphs are treated as subtractive.
Xor The overlapping parts become transparent.		Copy Only new graphics are preserved and others are erased.

Note: The copy and darker attribute values are temporarily invalid on Gecko 1.8 browsers (Firefox 1.5 betas, etc.).

HTML5 Canvas Globalcompositeoperation Drawing type explanation