Understanding Compositing and Blending

With 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 moving along nicely and is starting to show up in more and more browsers.

canvas_blend_clipped

You can find the compositing and blending spec here:

Working Draft: http://www.w3.org/TR/compositing/

Editor’s Draft: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html

If you’re not familiar with these terms, think of the working draft as a currently stable version, and the editor’s draft as a nightly build.  The editor’s draft is more recent, but perhaps not quite as polished.

Now if you’re like me, you’re thinking, ‘What exactly is the difference between compositing and blending?’.

Compositing vs Blending

Normally, when you draw one graphic element over another (e.g. draw an IMG over a colored DIV in a Web page), you would use simple alpha compositing.  The alpha channel of the IMG would be used to control how the IMG is blended with the background DIV.  That’s pretty straightforward.  With the new compositing and blending spec however, there are many more creative options.

If you have a graphic element and you’re drawing it on a backdrop, compositing figures out where the backdrop is visible, where the graphic element is visible, and where one is visible through the other.  For example, using XOR compositing, you would have the following:

Blending on the other hand determines how colors from the graphic element and the backdrop interact.  Take the following image of a duck for example, overlaid on top of a background consisting of a spectrum of colors:

normal

If we use the multiply blending operation when drawing the duck, we get the following:

multiply

Canvas2d

In a canvas2d context, blending and compositing are controlled with the globalCompositeOperation attribute.  At present though, with canvas2d you can only have compositing or blending, but not both at the same time.  The same attribute is used to set both.

Blend Mode Options:

  • normal – Just use the source color
  • multiply – Multiply the source color by the backdrop color.  The result will always be at least as dark as the source or backdrop.
  • screen – Multiply the source color by the backdrop color but then take the complement.  The result will always be at least as light as the source or backdrop.
  • overlay – The backdrop is mixed with the source to reflect the lightness or darkness of the backdrop.
  • darken – The backdrop is replaced with the source if the source is darker.
  • lighten – The backdrop is replaced with the source if the source is lighter.
  • color-dodge – Brightens the backdrop to reflect the source color.
  • color-burn – Darkens the backdrop to reflect the source color.
  • hard-light – Similar to shining a harsh spotlight on the backdrop.
  • soft-light – Similar to shining a soft diffuse spotlight on the backdrop.
  • difference – Subtract the darker of the two colors from the other. A white source will invert the backdrop.
  • exclusion – A lower contrast version of difference.
  • hue – Resulting color is the hue of the source color and the saturation and luminosity of the backdrop.
  • saturation – Resulting color is the saturation of the source color and the hue and luminosity of the backdrop.
  • color – Resulting color is the hue and saturation of the source color and the luminosity of the backdrop.
  • luminosity – Resulting color the luminosity of the source color and the hue and saturation of the backdrop.

Compositing Mode Options:

  • source-atop – Source which overlaps the destination, replaces the destination. Destination is placed elsewhere.
  • source-in – The source that overlaps the destination, replaces the destination.
  • source-out – The source is placed where it falls outside of the destination.
  • source-over – The source is placed over the destination (default).
  • destination-atop – Destination which overlaps the source replaces the source. Source is placed elsewhere.
  • destination-in – Destination which overlaps the source, replaces the source.
  • destination-out – Destination is placed, where it falls outside of the source.
  • destination-over – Destination is placed over the source.
  • lighter – Display the sum of the source image and destination image.
  • copy – Only the source will be present.
  • xor – The non-overlapping regions of source and destination are combined.

As you can see, there are many creative possibilities here.  Check out this blog post by the Adobe Web Platform Team that describes how you can test this all out yourself:

http://blogs.adobe.com/webplatform/2013/05/20/canvas-blending-is-now-in-chrome-canary-safari-and-firefox/

Tagged , , , , , . Bookmark the permalink.

4 Responses to Understanding Compositing and Blending

  1. Tony Romig says:

    Hi Alan! Nice surprise this morning to click through a link on HTML5 Weekly and come across a familiar face! Glad to see things are going well post-MTX. This blog is a great resource, going to add it to my rotation. –T

  2. Saw the Adobe post that you mentioned last month and need to have a play about with compositing, like you said it leaves some great opportunity.

  3. Pingback: Photoshop Blending in a Canvas - Alan Greenblatt

Leave a Reply

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