Site Errors

All content on this site has recently been emergency moved to WordPress, after havin run on Movable Type for eight years. This means that content might be broken or missing. Restoring content is currently in progress, but content might still be missing for some time

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 @@ element, creating a few demos of image manipulation.

h3. @globalCompositeOperation@
The “@globalCompositeOperation@”:http://www.whatwg.org/specs/web-apps/current-work/#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”:http://cow.neondragon.net/stuff/reflection/ where the @destination-out@ value is used to make an image transparent.
h3. 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)”;@
bc. 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”:http://virtuelvis.com/gallery/canvas/fade2red.html
* “Fade to green”:http://virtuelvis.com/gallery/canvas/fade2green.html
* “Fade to blue”:http://virtuelvis.com/gallery/canvas/fade2blue.html
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”:http://snapshot.opera.com/ to view these demos.
h3. 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”:http://virtuelvis.com/gallery/canvas/fade2transparent.html.
h3. 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”:http://virtuelvis.com/gallery/canvas/searchlight.html
* “Soft searchlight”:http://virtuelvis.com/gallery/canvas/searchlight-soft.html
h3. 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.

Daniel

Daniel: Greyscaling an image impossible using canvas, since it involves reading the R, G and B values separately, and then averaging them. For the same reason, creating real sepia toned images is also impossible.

treesie727

I’ve been trying to view the “hard searchlight” and “soft searchlight” files above. The only thing I get is a blank page that says “mouseover the image” but there is no image. Am I doing something wrong or do I have to have a certain application to view these files?