About
Adobe® Photoshop® has a variety of helpful blend modes for compositing images from multiple RGBA layers. This small library provides the same functionality for HTML Canvas Contexts, with the goal of producing the same results as Photoshop.
Syntax
overContext.blendOnto( underContext, blendMode, offsetOptions );
- overContext : A CanvasRenderingContext2D
- underContext : A CanvasRenderingContext2D
- blendMode : A string with the blend mode to use, e.g. 'screen'
- offsetOptions : [optional] JS Object with some/all of the following keys:
destX, destY
The X/Y location in the 'underContext' to blend onto; both default to 0.
sourceX, sourceY
The X/Y location in the 'overContext' to blend from; both default to 0.
width,height
The size of the box to blend; both default to 'auto', blending up to the
right and bottom edges of the 'over' context.
Width and height may less than specified if there is not enough space
on the over or under contexts to fit the blend.
Use
In Node.js
-
Install the node module
npm install context-blenderThis will also install node-canvas, which requires a working Cairo install.
See https://github.com/Automattic/node-canvas#installation for more details. -
Use the library like so in the scripts:
// Requires the canvas library and augments it for you var Canvas = require('context-blender'); var over = new Canvas(100,100).getContext('2d'); var under = new Canvas(100,100).getContext('2d'); // …drawing something to both canvas contexts, and then: // Blend all of 'over' onto 'under', starting at the upper left corner over.blendOnto(under,'screen'); // Blend all of 'over' onto 'under' (again), starting at 17,42 in 'under' over.blendOnto(under,'multiply',{destX:17,destY:42}); // Blend a 16x16 tile from 'over' onto 'under' (again), starting at 17,42 in 'under' over.blendOnto(under,'add',{destX:17,destY:42,sourceX:32,sourceY:128,width:16,height:16});
In a Web Browser
// Likely an 'offscreen' (not in the DOM) canvas
var over = someCanvas.getContext('2d');
// Usually a canvas that is shown on the page
var under = anotherCanvas.getContext('2d');
// Blend all of 'over' onto 'under', starting at the upper left corner
over.blendOnto(under,'screen');
// Blend all of 'over' onto 'under' (again), starting at 17,42 in 'under'
over.blendOnto(under,'multiply',{destX:17,destY:42});
// Blend a 16x16 tile from 'over' onto 'under' (again), starting at 17,42 in 'under'
over.blendOnto(under,'add',{destX:17,destY:42,sourceX:32,sourceY:128,width:16,height:16});
Supported Blend Modes
The following blend modes work perfectly (or as nearly as the vagaries of the HTML Canvas allow):
normal(orsrc-over)src-inscreenmultiplydifferenceexclusion
The following additional blend modes mostly work as intended, but have issues when it comes to dealing with low-opacity colors.
Test images are the result of blending
over top of
(where the "lighter" repetitions are the result of lowered opacity).
add(orplus) - Photoshop's "Linear Dodge (add)" blend mode does not perform addition
on the opacities of the two layers. I have not yet figured out what it does instead.
For now, this mode performs simple numeric addition, the same as the SVG 1.2 "plus" mode.