Canvas Blending

Non-Separable Blend Modes

Non-separable modes regard all color components of the backdrop and source in combination. The hue, saturation, color and luminosity designations are rather self-explanatory: they point at color characteristics of the source object that are retained on the blended canvas surface.

hue

The hue blending mode creates a canvas with the hue of the source and the saturation and luminosity of the backdrop.

original backdrop

context.globalCompositeOperation="hue";
// backdrop image will keep its saturation and luminosity
var stonehenge=new Image();
stonehenge.src="Stonehenge.png";
stonehenge.onload=function(event) {
 context.drawImage(stonehenge, 0, 0);
 // lime rectangle is a source
 context.fillStyle="lime";
 context.rect(0, 0, 220, 165);
 context.fill(); // canvas acquires the hue of the lime rectangle
}

resultant canvas

saturation

The saturation mode keeps the hue and luminosity of the backdrop and takes the saturation of the source. In the example below, the hue and luminosity of the Stonehenge image will be preserved, but the saturation of the lime color will alter the final image:

context.globalCompositeOperation="saturation";
. . .

color

The color mode keeps the luminosity of the backdrop and applies the hue and saturation of the source. The mode may prove useful for coloring black-and-white images:

backdrop image

context.globalCompositeOperation="color";
// backdrop image will be loaded
var book=new Image();
book.src="Bible.png";
book.onload=function(event) {
 context.drawImage(book, 0, 0);
 // rectangle filled with the linear gradient is a source
 var linearGradient=context.createLinearGradient(0, 0, 400, 0);
 linearGradient.addColorStop(0.1, "dodgerblue");
 linearGradient.addColorStop(0.9, "crimson");
 context.fillStyle=linearGradient;
 context.rect(0, 0, 400, 267);
 context.fill();
}

"colored" image

luminosity

Using the luminosity mode provides the luminosity of the source and retains the hue and saturation of the backdrop. The mode can be employed to convert a colored canvas into its monochrome counterpart:

context.globalCompositeOperation="luminosity";
// backdrop rectangle
context.fillStyle="white";
context.rect(0, 0, 256, 256);
context.fill();
// source image will keep its luminosity
var car=new Image();
car.src="car.png";
car.onload=function(event) {
 context.drawImage(car, 0, 0);
}