Photoshop-style blend modes for HTML Canvas Contexts

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.

Allows you to do stuff like:

// 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});

Supports blend modes normal, screen, multiply and difference. Other blend modes are not (fully) supported (see the readme)

Photoshop-style blend modes for HTML Canvas Contexts →