Canvas 2D Context

Part 9. Transparency and Compositing

Transparency

The level of transparency is defined by the globalAlpha attribute which is part of the current graphics state. The default value of the attribute is 1.0: it means that graphic objects are painted opaquely onto the canvas plane. The value of 0.0 denotes absolute transparency. Three filled rectangles in the example below has alpha values equal to 0.3, 0.5 and 1.0, accordingly.

// alpha is 1.0 (default) now
context.fillStyle="crimson";

context.save(); // primary graphics state is saved
context.globalAlpha=0.3; // graphics state has changed
context.fillRect(10, 10, 100, 100);
context.restore(); // back to the primary graphics state

context.save();
context.globalAlpha=0.5;
context.fillRect(120, 10, 100, 100);
context.restore();

// last rectangle's alpha value is 1.0
context.fillRect(230, 10, 100, 100);

Opaque imaging presumes the painting of graphic objects opaquely onto the canvas in the order in which they are specified in the code. The resulting colors are just the colors of the last object rendered over the previously drawn shapes. Transparent imaging model which is fully supported in the HTML5 canvas implementations combines multiple objects and their colors according to the compositing rules.

Compositing

Graphic objects already drawn on the canvas constitute a backdrop. A new object is composited with the backdrop according to a set of Porter - Duff compositing operators. There are 11 operators that can be used as the value of the CanvasRenderingContext2D globalCompositeOperation attribute. The backdrop is also called destination, whereas a current object is termed the source. In the example below the blue rectangle represents the existing state of the canvas bitmap. Then a filled red arc is drawn onto the bitmap. The source-over default compositing operator is used: the source (arc) is placed over destination (rectangle).

context.save();
context.fillStyle="blue";
context.beginPath();
context.rect(10, 10, 210, 210); // destination is a rectangle
context.fill(); // destination shape is rendered
context.restore();

context.save();
context.fillStyle="red";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(220, 220, 100, 0.0, 6.28); // source is an arc
context.fill(); // source shape is rendered
context.restore();


The other operators are source-atop, source-in, source-out, destination-atop, destination-in, destination-out, destination-over, lighter, copy and xor:

source-atop: source overlapping the destination replaces it; the destination is rendered elsewhere

source-in: source overlapping the destination replaces it; other regions are transparent

source-out: source outside the destination is displayed

destination-atop: destination overlapping the source replaces it; the source is drawn elsewhere

destination-in: destination overlapping the source replaces it; other regions are transparent

destination-out: destination outside the source is displayed

destination-over: destination is rendered over the source

lighter: the sum of the source and destination is displayed

copy: only the source is displayed

xor: non-overlapping regions of source and destination are combined

Summary: Transparency and Compositing

transparency
context.globalAlpha

compositing
context.globalCompositeOperation