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.

Previous Post

9 Comments

  1. Image manipulation with Canvas

    Hi. Arve has made some cool examples of what you can do with canvas.
    Have a look 🙂

  2. Daniel

     /  2005-12-29

    Could you make an example on how to create a black and white image? Not desaturate, but kinda like the channel mixer.

  3. 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.

  4. Now that’s really nice. Canvas will really provide the base for some “mind-bending” web applications :).

  5. Sean

     /  2006-01-03

    That chick is hot.

  6. Arioch

     /  2006-01-11

    Oooh, i wish we will also see this in IE7 or at least IE7.sf.net 🙂
    And what about XML Binding Language ? this is quite cool thing fro Web Apps, and afair it was requested long ago 🙂

  7. Arioch, Canvas has been “implemented using VML”:http://me.eae.net/archive/2005/12/29/canvas-in-ie/
    As for XBL — I hold no particular opinion on it.

  8. treesie727

     /  2006-04-09

    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?

  9. treesie727: You need to have Opera 9, downloadable from “here”:http://my.opera.com/desktopteam/