How to realize graphic overlay with HTML5 Canvas

This article will explain in detail how to achieve graphic overlay in HTML5 Canvas. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

There are 12 combined types in Canvas, which are set with the property globalCompositeOperation, and the meaning of all values on Canvas is given below.

GlobalCompositeOperation attribute value and its meaning

"copy" only draws new graphics and deletes everything else.

The color where the "darker" graph overlaps is determined by the subtractive value of the two color values.

The existing content of "destination-atop" can only be retained where it overlaps with the new graphic. The new graphic is drawn after the content. Same as "source-atop"

"destination-in" where the new graphics and existing canvases overlap, the existing content is retained and all other content becomes transparent. Same as "source-in"

"destination-out" where the existing content does not overlap with the new graphics, the existing content is retained and all other content becomes transparent. Same as "source-out"

The new "destination-over" graph is drawn after the existing content. Same as "source-over"

The color where the "lighter" graph overlaps is determined by the value of the addition of the two color values.

"source-atop" draws new graphics only where the new graphics overlap with the existing content

"source-in" draws new graphics only where the new graphics and existing contents overlap, and all other content becomes transparent.

"source-out" draws new graphics only where they do not overlap with existing ones.

"source-over" new graphics are drawn on top of existing graphics, which is the default behavior

"xor" makes the graphics transparent where they overlap and where they are normally drawn.

In this article, "source" refers to the color to be painted on the canvas, while "destination" refers to the color that already exists on the canvas. The default value for globalCompositeOperation is

"source-over".

The reference code is as follows:

Ctx.fillStyle = 'red'

Ctx.fillRect (0,0,40,20)

Ctx.globalCompositeOperation= "destination-out"

/ / different situations will occur after the type value here is changed. Readers can try it on their own.

Ctx.fillStyle = 'blue'

Ctx.fillRect (8, 7, 20, 20)

On "HTML5 Canvas how to achieve graphic overlay" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.