Tech and Media Labs
This site uses cookies to improve the user experience.




HTML5 Canvas: Composition

Jakob Jenkov
Last update: 2014-06-15

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:

  1. globalAlpha
  2. globalCompositeOperation

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.

HTML5 Canvas not supported 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.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC