How to create intersecting shapes in html5 canvas tag <p>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...</p> <p>this is my code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; 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(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id = myCanvas width = 400 height = 400 style = "border:1px solid #000" &gt; &lt;/canvas&gt; &lt;/body&gt; </code></pre> <p></p> <p>What i get is this: <a href="http://dl.dropbox.com/u/1144075/Bild%207.png" rel="nofollow">http://dl.dropbox.com/u/1144075/Bild%207.png</a></p>