Arve Bersvendsen

Image manipulation in <canvas>

Christmas is a time to meet family and friends. Incidentally it’s also a time to code on all the stuff you never have a chance to do during regular working hours. During my one-week holiday, I’ve spent some nights playing with the <canvas> element, creating a few demos of image manipulation.

globalCompositeOperation

The globalCompositeOperation attribute on the canvas context allow authors to change how images and shapes are drawn on to the canvas. This can be used to great effect. The most famous example of it’s use so far is in the Canvas Reflection Demo where the destination-out value is used to make an image transparent.

Extracting R, G and B.

The darker composite operation displays the sum of the source image and destination images, with color values approaching 0 as a limit. This is done on a per-component basis, comparing the R, G and B values separately. This effectively allows us to remove individual color components from the canvas, using the correct fill style.

To remove the green and blue components of the canvas, we paint a rectangle over the canvas, using darker and fillStyle = "rgba(255,0,0,1)";

var canvas = document.createElement('canvas');	
var ctx = canvas.getContext('2d');
img = new Image();
img.src = "sabrina.jpg";
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0,img.width,img.height);
ctx.globalCompositeOperation = "darker";		
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.fillRect(0,0,ca.width,ca.height);

I have created three examples, each fading the test image to red, green and blue, respectively:

• Fade to red
• Fade to green
• Fade to blue

Note that Firefox does not support the darker attribute value, and so these examples only work in Opera 9. If you don’t have Opera 9, download and install the Technical Preview to view these demos.

Forcing something to transparency

The destination-out attribute value will display the destination image wherever the destination image is opaque and the source image is transparent, and will display transparency elsewhere. This means that when we overlay something opaque over an image, the previous part of the image becomes transparent. I have created an example that fades an image to transparent.

Searchlights

Finally, in these examples, I have created a searchlight that follows the mouse. These two examples use a combination of techniques discussed earlier. In addition the soft searchlight uses a gradient to create a soft light effect:

• Hard searchlight
• Soft searchlight

Speed: Avoid clearRect

Something you will notice if you study the examples, is that whenever a full repaint of the canvas is required, the clearRect() method is usually not called, but the composite operation copy is used instead. This is being done to speed up the operation, since copy will replace the current content of the canvas with whatever it’s painting. This is like calling clearRect() implicitly, but you don’t have to take any transformations and rotations into consideration, and so it will become much faster.