HTML5 canvas globalCompositeOperation graphic type description, html5canvas

HTML5 canvas globalCompositeOperation graphic type description, html5canvas

We always draw one image on the other. In most cases, this is not enough. For example, it is subject to the drawing sequence. However, we can useglobalCompositeOperationAttribute to change these practices.
globalCompositeOperation = type
We can not only draw new images behind existing images, but also cover and clear (comparedclearRectMethod is much stronger) in some regions.

typeIs one of the following 12 string values:

Note: In all the examples below, the Blue Circle is drawn first, that is, "existing canvas content", and the red circle is drawn later, that is, "New Image ".

Source-over(Default) This is the default setting, and the new image will overwrite the original content.		Destination-over The new image will be drawn under the original content.
Source-in The new image only overlaps with the original content. Other regions are transparent.		Destination-in The overlapping parts of the original content and the new image will be retained, and other areas will become transparent.
Source-out The result is that only the parts in the new image that do not overlap with the original content will be drawn.		Destination-out Parts of the original content that do not overlap with the new image will be retained.
Source-atop The overlapping parts of the new image and the original content will be drawn and overwrite the original content.		Destination-atop The overlapping parts of the original content and the new content will be retained, and a new image will be drawn under the original content.
Lighter The overlapping parts of the two images are colored.		Darker The overlapping parts of the two images are used for color reduction.
Xor The overlapping parts become transparent.		Copy Only new images are retained, and others are cleared.

Note:copyAnddarkerThe property value is temporarily invalid in Gecko 1.8 browser (Firefox 1.5 betas, and so on.