CODEWITHSUNDEEP
htmlcanvas
tzippy
tzippy

Reputation: 6638

How to create intersecting shapes in html5 canvas tag

I want to have to shapes, that intersect each other. The intersection should be empty then. Somewhere I read that this is achieved by clockwise and anticlockwise drawing direction. But i cant figure it out...

this is my code:

<html>
<head>
      <script>

          with( document.getElementById( 'myCanvas' ).getContext( '2d' ) ){


            shadowOffsetX = 10;
            shadowOffsetY = 10;  
            shadowBlur = 20;  
            shadowColor = "rgba(0, 0, 0, .75)";          

            translate( 50, 70 );
            scale( 2, 2 );

            beginPath();

            fillStyle = 'red';

            strokeStyle = "white";
            fillStyle = "#FFFF00";
            beginPath();
            arc(100,100,50,Math.PI*2,0,true);
            closePath();
            stroke();
            fill();

            strokeStyle = "white";
            fillStyle = "#FFFF00";
            beginPath();
            arc(50,50,50,-Math.PI*2,0,true);
            closePath();
            stroke();
            fill();

            closePath();

            fill();

          }

      </script>
</head>

<body>
    <canvas
    id      = myCanvas
    width   = 400
    height  = 400
    style   = "border:1px solid #000"
      >
     </canvas>
</body>

What i get is this: http://dl.dropbox.com/u/1144075/Bild%207.png

Upvotes: 1

Views: 1392

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

Drawing paths the opposite way only works if they are on the same path and isn't what you want in this instance.

What you want is to change the Global Composite Operation:

ctx.fillRect(50,50,50,50);
ctx.globalCompositeOperation = 'xor';
ctx.fillRect(75,75,50,50);

Example: http://jsfiddle.net/MEHbr/

Edit: And if you want to see an example of what they mean by drawing opposite directions on a path, I have made an example of that for you too (in red): http://jsfiddle.net/MEHbr/6/

Upvotes: 2

Related Questions