var canvas = document.getElementById('myCanvasElement');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(...);//draw a circle
ctx.closePath();
ctx.clip();
ctx.drawImage(...);//OK here, image is drawn and clipped into a circle shape
//ctx = c.getContext('2d'); //Whether this line commented or not, result is
same
ctx.beginPath();
ctx.arc(...);//circle with larger radius
ctx.clip();
ctx.drawImage(...); //PROBLEM!! draw same image again, but the clip region
is still same as previous, expected the image clipped into a LARGER circle
shape
I read the canvas portion of "www.w3.org/TR/html5/", it seems that the
context's clip region can only get smaller and smaller, however,
I believe there must be a way to enlarge it (assume I don't want to
re-create the canvas element again due to some constraint).
Any advice is appreciated, thanks a lot!
Regards,
cp