How to anti-alias clip() edges in html5 canvas under Chrome Windows?

Question

I\'m using the clip() function on a canvas.

Results:

As you c

Answer 1

I came across the same issue with Chrome and clip().

In my circumstance I achieved better browser compatibility by setting the canvas globalCompositeOperation.

context.globalCompositeOperation = 'source-atop';

So draw your shape, a circle in this case. Then switch to 'source-atop' and draw your kitten image.

Note, this is a quick fix for basic drawing and assumes a blank canvas. Previous canvas drawing will affect your clip.