Inverse clipping path

[dariodariodario]

Hello,
the example at

https://developer.mozilla.org/en/Canvas_tutorial/Compositing

shows how to make a clipping region of a circle. What if I want to make the outside of the circle the clipping region? I mean I want the outside to be visible and the inner not (I tried to change the direction of the arc but no success...).[/url]

[zcorpan]

You mean like destination-out?

[connor]

Code: Select all

   ...
   gContext.beginPath();

   // draw a circle

   gContext.arc(centerX, centerY, boxWidth/2, 0, Math.PI*2, false);

   // draw a box around that circle as part of the same path

   gContext.moveTo(centerX-boxWidth/2, centerY-boxWidth/2);
   gContext.lineTo(centerX-boxWidth/2, centerY+boxWidth/2);
   gContext.lineTo(centerX+boxWidth/2, centerY+boxWidth/2);
   gContext.lineTo(centerX+boxWidth/2, centerY-boxWidth/2);
   gContext.lineTo(centerX-boxWidth/2, centerY-boxWidth/2);

   gContext.closePath();
   gContext.clip();


Results in a clipping path consisting of a square region centered at (centerX, centerY) with sides of length boxWidth which excludes a circular region at the center with radius boxWidth/2.