These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:11 pm Advanced search

Inverse clipping path

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

Inverse clipping path

Postby dariodariodario » Tue Jul 06, 2010 4:58 pm

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]
dariodariodario
<h6>
 
Posts: 2
Joined: Tue Jul 06, 2010 12:09 pm

Postby zcorpan » Tue Jul 06, 2010 6:57 pm

You mean like destination-out?
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

clip() automatically takes care of negative space

Postby connor » Mon Jul 12, 2010 5:42 pm

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.
User avatar
connor
<h6>
 
Posts: 1
Joined: Mon Jul 12, 2010 5:32 pm
Location: Wisconsin


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests