Canvas Blending

Separable Blend Modes

The normal, multiply and screen blend modes exemplified in the previous article are called separable: blending is applied separately to corresponding color components of the backdrop and source. In addition to these three modes standard separable modes include overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference and exclusion.

overlay

Backdrop objects blended with the source in the overlay mode retain their lightness and shadows:

backdrop image

context.globalCompositeOperation="overlay";
// backdrop image
var image=new Image();
image.src="Duke.png";
image.onload=function(event) {
 context.drawImage(image, 0, 0);
 // rectangle as a source will be mixed with the backdrop
 // to reflect the light and dark regions of the image
 context.fillStyle="goldenrod";
 context.rect(0, 0, 160, 160);
 context.fill();
}

darken

The darken blend mode makes the browser to choose the darker of the source and destination colors. In the example below, the red backdrop is replaced with colors from the source where the source is darker:

source image

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

the red backdrop is visible in regions where it is darker than the source

lighten

The lighten blending selects the lighter of the backdrop and source colors: the same canvas blended in the lighten mode makes the red backdrop visible in regions where it is lighter than the source.

context.globalCompositeOperation="lighten";
. . .

color-dodge

Setting the canvas blend mode to color-dodge brightens the backdrop:

backdrop

context.globalCompositeOperation="color-dodge";
// backdrop image
var image=new Image();
image.src="pagoda.png";
image.onload=function(event) {
 context.drawImage(image, 0, 0);
 // red rectanlge is a source used to brighten the drawn image
 context.fillStyle="red";
 context.beginPath();
 context.rect(0, 0, 383, 254);
 context.fill();
 context.closePath();
}

the backdrop is brightened with the red color

color-burn

The color-burn mode darkens the backdrop:

context.globalCompositeOperation="color-burn";
// the same image as a backdrop
var image=new Image();
image.src="pagoda.png";
image.onload=function(event) {
 context.drawImage(image, 0, 0);
 // red rectanlge is a source utilized to darken the drawn image
 context.fillStyle="red";
 context.rect(0, 0, 383, 254);
 context.fill();
}

hard-light

The hard-light mode emulates a harsh spotlight:

canvas backdrop

context.globalCompositeOperation="hard-light";
// image as a backdrop
var image=new Image();
image.src="fountain.png";
image.onload=function(event) {
 context.drawImage(image, 0, 0);
 // arc filled with the radial gradient is a source
 var radialGradient=context.createRadialGradient(110, 175, 50, 110, 175, 100);
 radialGradient.addColorStop(0.0, "green");
 radialGradient.addColorStop(1.0, "white");
 context.fillStyle=radialGradient;
 context.arc(110, 175, 90, 0.0, 6.28);
 context.fill();
}

result of blending

soft-light

The soft-light mode creates an effect of a diffused spotlight. The same canvas with the context.globalCompositeOperation property equal to soft-light will produce the following rendering:

difference

The difference mode subtracts the darker color from the lighter one:

backdrop

source

context.globalCompositeOperation="difference";
// backdrop image
var smartphone=new Image();
smartphone.src="smartphone.png";
smartphone.onload=function(event) {
 context.drawImage(smartphone, 68, 3);
 // now the source image is loaded and blended with the backdrop
 var android=new Image();
 android.src="droid.png";
 android.onload=function(event) {
  context.drawImage(android, 0, 60);
 }
}

resultant image

exclusion

The exclusion is similar to the difference mode, though it produces less vibrant colors:

context.globalCompositeOperation="exclusion";
. . .