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

I wanted to copy a CRISP, un modified version of the canvas on top of itself. I eventually came up with this solution, which applies.

https://jsfiddle.net/4Le454ak/1/

The copy portion is in this code:

var imageData = canvas.toDataURL(0, 0, w, h);
var tmp = document.createElement('img');
tmp.style.display = 'none'
tmp.src = imageData;
document.body.appendChild(tmp);
ctx.drawImage(tmp, 30, 30);

What's happening:

• copy image data from canvas
• set image data to a non-displayed ( has to be in dom though)
• draw that image back onto the canvas
• you can delete or reuse the at this point