HTML5 Canvas: Composition
Jakob Jenkov |
When drawing shapes on an HTML5 canvas, you can set how what you draw is composited with what is already drawn on the canvas. In other words, how what you draw is blended with what is already on the canvas.
The 2D Context has two attributes which control the composition mode of a canvas. These are:
globalAlphaglobalCompositeOperation
globalAlpha
The globalAlpha attribute determines the transparency / opacity of what you draw.
It can take a value between 0 and 1. A value of 0 means that what you draw is completely transparent.
A value of 0.5 means that what you draw is semi-transparent.
A value of 1 means that what you draw is completely opaque. The default value is 1.
The globalAlpha attribute is set like this:
context.globalAlpha = 0.5;
globalCompositeOperation
The globalCompositeOperation attribute determines how what you draw is blended into
the existing graphics on the canvas.
The globalCompositeOperation attribute is set like this:
context.globalCompositeOperation = "copy";
The values for globalCompositeOperation refers to a "source" and a "destination", and
specifies how the source and destination is blended. The source is what you draw, and the destination
is what is already drawn. Here is a list of the possible values, and their meaning:
| Value | Description |
copy |
Where source and destination overlaps, the source is displayed. |
destination-atop |
Where the source and destination overlap, and both are opaque, the destination is displayed. Where the destination is transparent, the source is displayed. |
destination-in |
Where the source and destination overlaps, and both are opaque, the destination is displayed. The source is not displayed where no overlaps exists. |
destination-out |
Displays the destination everywhere the source and destination do not overlap. Everywhere else, transparency is displayed. |
destination-over |
Where source and destination overlaps, the destination is displayed. Where no overlap exists, the source is displayed. |
source-atop |
Where source and destination overlaps, the source is displayed. Where no overlaps exists, or where the source is transparent, the destination is displayed. |
source-in |
Where source and destination overlaps and both are opaque, the source is displayed. Everywhere else transparency is displayed. |
source-out |
Where the source and destination do not overlap, the source is displayed. Everwhere else transparency is displayed. |
source-over |
Where the source is opaque, the source is displayed. The destination is displayed everywhere else. |
lighter |
The source and destination colors are added to each other, resulting in brighter colors, moving towards color values of 1 (maximum brightness for that color). |
xor |
An HTML5 Canvas Composition Example
Here is an example canvas where you can play around with the compositing modes, and alpha values. You can change the compositing mode by clicking the buttons. The alpha mode is changed by using the control just below the canvas.
globalAlpha
If you see a text field for the globalAlpha, type in values between 0 and 100.
The code converts the value to be between 0 and 1.0 .
Otherwise just use the slider.
Note: at the time of writing there is a difference between how Firefox and Chrome handles these compositing modes. It also seems to be different from e.g. rects and text how the modes work. Play around with the modes in the various browsers you plan to support, to see how they work.
| Tweet | |
Jakob Jenkov | |
