title: How to anti-alias clip() edges in html5 canvas under Chrome Windows?
body: <p>I'm using the clip() function on a canvas.</p>
  
  <p>Results:
  <img src="https://i.stack.imgur.com/NlRyp.png" alt="using canvas clip in various browsers"></p>
  
  <p>As you can see the chrome version has horrible jaggies / aliasing along the edges. How do I fix this?</p>
  
  <p>Code to reproduce:</p>
  
  <p><a href="http://jsfiddle.net/ZRA76/" rel="noreferrer">http://jsfiddle.net/ZRA76/</a> :</p>
  
  <pre><code>&lt;canvas id="test" width="300" height="300"&gt;&lt;/canvas&gt;​
  
  &lt;script type="text/javascript"&gt;
      cv = document.getElementById("test");
      ctx = cv.getContext("2d");
  
      var im = new Image();
      im.onload = function () {
          ctx.beginPath();
          ctx.arc(110, 110, 100, 0, 2*Math.PI, true);
          ctx.clip();
          ctx.drawImage(im, 0, 0);
      }
      im.src = "http://placekitten.com/300/300";
  &lt;/script&gt;
  </code></pre>