HTML Canvas clip and putImageData

Question

I have a canvas with a large image in the background and a smaller round image in front of it. I achieved this round image effect by using clip like so

ctx.s         


        

Answer 1

According to the specs,

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

In your case, why are you using an additional canvas and pixel data manipulations? Why not just

ctx.save();

ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);   
ctx.closePath();
ctx.clip();

ctx.translate(x, y);
ctx.drawImage(img, -r, -r, 2*r, 2*r);
// not restoring context here, saving the clipping region and translation matrix

// ... here goes the second part, wherever it is:
ctx.save();
ctx.rotate(a);
ctx.drawImage(img, -r, -r, 2*r, 2*r);
ctx.restore();