putImageData(), how to keep old pixels if new pixels are transparent?

Question

In html5, when you draw to a canvas using putImageData(), if some of the pixels you are drawing are transparent (or semi-transparent), how do you keep old pixels in the canv

Answer 1

You can use getImageData to create a semi-transparent overlay:

• create a temporary offscreen canvas
• getImageData to get the pixel data from the offscreen canvas
• modify the pixels as you desire
• putImageData the pixels back on the offscreen canvas
• use drawImage to draw the offscreen canvas to the onscreen canvas

Here's example code and a Demo: http://jsfiddle.net/m1erickson/CM7uY/

Alternatively, you might check out using a linear gradient to do your effect more directly.

http://jsfiddle.net/m1erickson/j6wLR/