Canvas Blending Overview

Canvas interfaces are gradually becoming more sophisticated. The latest improvements of the Canvas 2D Context API concern dash patterns, the ImageData constructor and canvas blending. The blending mode is one of the most important concepts of computer graphics. An opaque imaging model paints each graphic object sequentially: a new layer obscures a previous one. The transparent imaging model implemented in the HTML5 <canvas> API combines multiple graphic objects and their colors. Shapes and images already displayed on a canvas form a backdrop. A new object is called a source. The source is combined with its backdrop according to the specified blending and compositing operators.

The blending step is performed first: any pixel value in the source is processed with the corresponding pixel value of the backdrop to produce a resultant set of colors. Then the compositing task is carried out in compliance with the Porter-Duff operators. Canvas compositing was implemented in browsers long ago. Canvas blending is a relatively fresh feature. Both blending and compositing operators are assigned as values of the CanvasRenderingContext2D globalCompositeOperation property.

Three examples below demonstrate the use of canvas blending techniques: the normal mode presumes no blending is performed whereas the multiply and screen modes change the canvas and its constituent graphic objects.

normal

When the mode is normal it means that the backdrop is ignored: the pixel values of the source will just override the corresponding pixel values of the backdrop. In the example below, a yellow rectangle filling the whole canvas is painted, then an external image resource is loaded and rendered over the rectangle. The image is a source, so it will retain all its colors. The yellow rectangle is only visible as a thin border surrounding the image:

var canvas=document.getElementsByTagName("canvas").item(0);
var context=canvas.getContext("2d");
context.globalCompositeOperation="normal";
// yellow rectangle as a backdrop
context.fillStyle="yellow";
context.rect(0, 0, 410, 277);
context.fill();
// image as a source
var chess=new Image();
chess.src="checkmate.png";
chess.onload=function(event) {
 context.drawImage(chess, 5, 5);
}

multiply

To add a golden tint to the chess pieces in the source image, the canvas blend mode in the example below is set to multiply. The image colors will be multiplied by the destination yellow color:

context.globalCompositeOperation="multiply";
// yellow rectangle as a backdrop
context.fillStyle="yellow";
context.rect(0, 0, 410, 277);
context.fill();
// image as a source
var chess=new Image();
chess.src="checkmate.png";
chess.onload=function(event) {
 context.drawImage(chess, 5, 5);
}

screen

The screen example below paints a maroon rectangle as the canvas backdrop, then a loaded image is screened with the color. Resultant colors are at least as light as primary colors in both the destination and source graphical objects.

source image

context.globalCompositeOperation="screen";
// maroon rectangle as a backdrop
context.fillStyle="maroon";
context.rect(0, 0, 258, 400);
context.fill();
// image as a source
var pond=new Image();
pond.src="pond.png";
pond.onload=function(event) {
 context.drawImage(pond, 0, 0);
}

the same image screened with maroon color

CSS Blending Properties

JavaScript-based blending is a logical extension descendant from the <canvas> element interfaces. There's also a set of CSS blending properties that are applied to other HTML elements. The properties are still considered somewhat experimental, but no doubt they will be implemented as a default stable feature in all modern browsers. These are background-blend-mode and mix-blend-mode. The first property defines the blending mode of all background layers pertaining to an element. For instance, the chess-board with the "golden" chess-men from the example above can be created as a result of blending the background image (source) of the <div> element with its background color (backdrop):

<style>
#chess-board {
 width: 410px; height: 277px;
 background-color: yellow;
 background-image: url(checkmate.png);
 background-position: center;
 background-repeat: no-repeat;
 background-blend-mode: multiply;
}
</style>
. . .
<div id="chess-board"></div>

The mix-blend-mode demonstration can be based on the screen example: the <div> element provides the backdrop with its maroon color, then the <img> element is represented as the source. The image is screened with the backdrop color:

<div style="width: 258px; height: 400px; background-color: maroon;">
 <img src="pond.png" width="258px" height="400px" style="mix-blend-mode: screen;">
</div>