Photoshop Blending in a Canvas

I explained a bit about compositing and blending in a previous post, how Canvas blending lets you achieve in a Canvas the same kinds of blending effects you’d find in Photoshop.

Updated – September 24, 2013:
Canvas Blending is also supported on Firefox and iOS7 Safari

Programmatically working with the blend mode is pretty straightforward.  You just take your Canvas context and set the variable globalCompositeOperation:

var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';

If you’re viewing this post with Chrome and have turned on experimental Webkit features, or you’re running the latest stable version of Firefox or iOS7 Safari, you’ll be able to actually play with this feature below.  Try experimenting with the blend mode and/or color and then drawing on the image.

Check out this Pen!

If the blending is not working for you above, check out this video:



Tagged , , , . Bookmark the permalink.

3 Responses to Photoshop Blending in a Canvas

  1. Pingback: Best of JavaScript, HTML & CSS – Week of September 9, 2013 | Flippin' Awesome

  2. Pingback: The Web Just Got A Whole Lot More Awesome | ANDREW TRICE

  3. Andy says:

    It’s amazing to me that this apparently isn’t used too often. Such an essential thing to have for anything visual.

    I just find it a shame that no proper “Linear Dodge”/”Add” seems to exist. It’s something I use a lot to have two blended images get closer to white.
    But “Lighten” seems to work differently, because when you blend two layers that way, saturation is maintained. Which is more like “Color Dodge”.

Leave a Reply

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