Is it possible to make a gradient-transparent/layer masking image using canvas?

Question

I've been following the lessons about transparency and gradients on mozillas site https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors but I have not been able to figure this one out.

I know I can achieve these effects with a png image; however, in the program I am working on the gradient will chance constantly according to where the image is moved.

Here's an example of the effect I'm looking for. http://home.insightbb.com/~epyonxl1/gradientex.jpg

Answer 1

If you need to make an image transparent set the ctx.globalAlpha to whatever you need (1, no transparency, is default). Then reset it after you draw your image. This URL probably will help as well https://developer.mozilla.org/en/Canvas_tutorial%3aCompositing.

Answer 2

I've aded some code here http://code.google.com/p/canvasimagegradient/ that adds a drawImageGradient function to the CanvasRenderingContext2D. You can draw an image with a linear or radial gradient. It doesn't work in IE, even with excanvas, due to the lack of getImageData/putImageData support.

The following code for example will draw an image with a radial gradient (context retrieve and image load not shown):

var radGrad = ctx.createRadialGradient(
    img.width / 2, img.height / 2, 10, 
    img.width / 2, img.height / 2, img.width/2);
radGrad.addColorStop(0, "transparent");
radGrad.addColorStop(1, "#000");

ctx.drawImageGradient(img, 112.5, 130, radGrad);

The code works as follows:

1. Create a canvas element dynamically and draw the image on it.
2. Retrieve the imageData for this new canvas.
3. Retrieve the imageData for the location on the canvas you want to draw the image on to.
4. Iterate through the destination imageData and update each pixel adding together a percentage (derived from the gradient transparency value) of the image and destination pixel values.
5. Finally put the updated image data back onto the destination canvas.

Obviously performance is an issue as images get larger. The image on http://code.google.com/p/canvasimagegradient/ it takes about 6-10ms to draw. A 1024x768 image takes about 100ms-250ms to draw. Still usable though as long as you're not animating.