How to enlarge the canvas' 2d context's clip region

50 views
Skip to first unread message

CodePlay

unread,
Jan 15, 2009, 9:45:43 AM1/15/09
to dev-te...@lists.mozilla.org
Hi folks:
I have problem enlarging a 2d context's clip region, pls refer to
the pseudo code:

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

Reply all
Reply to author
Forward
0 new messages