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.
If the blending is not working for you above, check out this video: