Web Platform Team Blog

Adobe

decor

Making the web awesome

Canvas blending is now in Chrome Canary, WebKit Nightly and Firefox!

After landing in Firefox and WebKit, canvas blend modes are now available in Chrome Canary!

Screen Shot 2013-05-14 at 10.33.48 AM

Here’s what you need to do check out the feature in your favorite browser:

Mozilla Firefox

For Firefox, canvas blend modes are enabled by default in the stable version, so there are no prerequisite steps for enabling canvas blend modes.

Chrome Canary

To see canvas blending at work in Chrome, download the latest Canary build, enable canvas blend modes in Canary.

WebKit

For WebKit, simply download one of the nightly builds from http://nightly.webkit.org.

Once you’ve completed these steps, navigate to this codepen to see canvas blending at work!

7 Comments

  1. May 21, 2013 at 5:09 am, Dynamic Web Training said:

    Thanks for the tip. Cheers

  2. May 21, 2013 at 12:00 pm, Christian Cantrell said:

    Can you please add a link explaining what this feature is? Thanks!

  3. May 29, 2013 at 9:58 am, Owen Densmore said:

    Will this help with “crisp” rendering when scaling up an image? I.e. can I avoid anti-aliasing, and get nearest neighbor for example?

    Use: I have a checkerboard that has “cells” that are multiple pixels on a side, 10×10 say. A fast rendering stunt is to build a small, 1×1 image via ImageData and scale it up by 10. But I need to avoid anti-aliasing.

    Currently I have to set:
    ctx.imageSmoothingEnabled = false
    ctx.mozImageSmoothingEnabled = false
    ctx.webkitImageSmoothingEnabled = false
    … and pray that it works.

    • May 30, 2013 at 2:01 am, Mihai Țică said:

      Hey Owen, do you perhaps have an example we could look over?

  4. June 11, 2013 at 4:57 pm, Understanding Compositing and Blending - Alan Greenblatt said:

    [...] Canvas blending now in Chrome Canary, WebKit Nightly and Firefox, it’s a good idea to start getting your head wrapped around this spec.  It seems to be [...]

  5. July 28, 2013 at 9:01 pm, AboutaDirk said:

    Getting closer and closer to a web-based Photoshop ;)

    Jokes aside, we’re getting closer and closer to a web-based Photoshop.

    No really.