Please visit Straf Spul's main site. This is the nerdy corner.

Unique Random

globalCompositeOperation testbed

This is a testbed for the globalCompositeOperation of the javascript canvas api, which allows you to create more advanced image compositing effects like image masks.

With the selectbox above you can change the value of the globalCompositeOperation and then the 12 canvases in the grid are repainted applying the selected value.

The blue one represents always the original state of the canvas and the red one is the one that is being drawn on top of the canvas after the compositing attribute has been changed. The top row consist of purely api drawing calls, while the Keith Haring looking guy and the pentagon are in fact images (png's) that are being copied over to the canvas. I tried to play a little bit with applying both transparency and hard edges.

If you want to write scripts yourself using globalCompositeOperation, i advise you to test the example above in as much browsers as you possibly can. The implementation is very different in each browser, so you will have to do more hacking then you expect to achief the effect you desire in all browsers.