Firefox 20 Nightly Gets Color Blend Modes for the Canvas

Firefox 20 has gotten a very interesting new feature, support for several types of blending, things like overlay, color-burn and so on. This is only for HTML5 Canvas, but Adobe's Rik Cabanier is working on adding blend modes to the specifications for both CSS and Canvas.

To prove the need and how it would work, he implemented the code needed in Firefox and plans to do the same for WebKit. The code for the Canvas component is ready and is shipped with Firefox 20 Nightly.

Specifically, the implementation extends the "globalCompositeOperation" property which defines how a new image is drawn on top of what was already displayed in the Canvas.

Normally, the new image just replaces the old one, but with the new blend modes, the two images can be combined (i.e. blended) in ways familiar to anyone that's used a photo editor before.

For now, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity are supported.

This is just an early implementation and may not arrive in the stable Firefox 20. But if things go according to plan, blending will become a standard feature for both CSS and the HTML5 Canvas.