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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.