English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In HTML5When drawing shapes on the canvas, you can set how the drawn content is composited with the content already drawn on the canvas. This article introduces how to mix the painting content with the existing content on the canvas.
2The D context has two properties that control the canvas composition mode. These are:
globalAlpha
globalCompositeOperation
The globalAlpha property determines the opacity of the drawn content/Opacity. It can take a value between 0 and1between the values. 0 indicates that the content you draw is completely transparent. The value is 0.5It indicates that the content you draw is semi-transparent. The value is1It indicates that the content you draw is completely opaque. The default value is1.
The globalAlpha property is set as follows:
context.globalAlpha = 0.5;
The globalCompositeOperation property determines how the content you draw is blended into the existing graphics on the canvas.
The globalCompositeOperation property is set as follows:
context.globalCompositeOperation = "copy";
The globalCompositeOperation property refers to 'source' and 'destination' and specifies how to blend the source and destination. The source is the content you draw, and the destination is the content that has already been drawn. Below is a list of possible values and their meanings:
| Value | Description |
copy | The source will be displayed where the source and destination overlap. |
destination-atop | The destination will be displayed when the source and destination overlap and both are opaque.If the destination is transparent, the source will be displayed. |
destination-in | The destination will be displayed where the source and destination overlap and both are opaque.The source will not be displayed where there is no overlap. |
destination-out | The destination will be displayed at any location where the source and destination do not overlap.Transparency will be displayed at any other location. |
destination-over | The destination will be displayed where the source and destination overlap.The source will be displayed if there is no overlap. |
source-atop | The source will be displayed where the source and destination overlap.The destination will be displayed where there is no overlap, or the source is transparent. |
source-in | The source will be displayed when the source and destination overlap and both are opaque.Transparency will be displayed at any other location. |
source-out | The source will be displayed where the source and destination do not overlap.Transparency will be displayed at any other location. |
source-over | When the source is opaque, the source will be displayed.the destination is displayed elsewhere. |
lighter | The source color and target color are overlaid on each other, making the color brighter, towards1color values (the maximum brightness of the color) move. |
xor |
This is an example canvas where you can use composition modes and alpha values. You can change the composition mode by clicking the button. You can change the Alpha mode by using the controls below the canvas.
globalAlpha
If you see the text field globalAlpha, please enter a value between 0 and10between 0. The code will convert the value to 0 to1between 0.0. Otherwise, use the slider.
Note: At the time of writing this article, Firefox and Chrome handle these composition modes differently. It also seems to differ from rects and text, how these modes work. Try various modes in the browsers you plan to support to understand how they work.