Home/ Questions/Q 3981216
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T05:23:01+00:00

I want to have to shapes, that intersect each other. The intersection should be

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0