title: html canvas clipping noisy edges
body: <p>I found some issue during clipping canvas area. 
  something like antialias i dont know.
  There are some fuzzy pixels </p>
  
  <p>I tried turn off alpha and antialias may be globalCompositeOperation can help.
  Also i tried reverse clipping.</p>
  
  <p>Image here is describing place of issue
  <a href="https://imgur.com/a/sslqaZy" rel="nofollow noreferrer">https://imgur.com/a/sslqaZy</a></p>
  
  <pre><code>var canvas = document.getElementById('mCanvas');
  var ctx = canvas.getContext('2d', { alpha: true });
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 6;
  
  ctx.save();
  
  var x = canvas.width * 0.5;
  var y = canvas.height * 0.5;
  
  var t = 0; // time
  var pi = 2 * Math.PI;
  
  var dbg1 = 1;
  var dbg2 = 1;
  var dbg3 = 1;
  
  function spiral(x,y,a,b,sa,st,en)
  {
      var x0,y0,angle;
  
      ctx.moveTo(x0, y0);
      for (i = st; i &lt; en; i+=1) {
  
          angle = (0.5*Math.PI)/(390) * i + sa;
          x0 = x + a*Math.sin(angle*2) * i * 0.2;
          y0 = y + b*Math.cos(angle*2) * i * 0.2;
          if (i===st) ctx.moveTo(x0, y0);
          ctx.lineTo(x0, y0);
      }
  
  }
  
  function draw() {
      ctx.clearRect(0, 0, innerWidth, innerHeight);
  
  
      t = (t%1) + 0.003;
  
      ctx.beginPath();
      for(var i = 0; i&lt; 1 ; i+=0.05)
      {
          spiral(x, y, 1, -1, pi*i + pi*t, 950, 2000);
      }
      ctx.stroke();
      ctx.closePath();
  
      ctx.save();
      ctx.beginPath();
      ctx.arc(x,y,195,0,pi);
      ctx.fill();
      ctx.closePath();
  
      ctx.clip();
      ctx.beginPath();
      for(var i = 0; i&lt; 1 ; i+=0.05)
      {
              spiral(x, y, 1, -1, pi*i - pi*t, 460, 1000);
      }
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
  
  
      ctx.save();
      ctx.beginPath();
  
      ctx.arc(x,y,95,0,pi);
      ctx.fill();
      ctx.closePath();
      ctx.clip();
      ctx.beginPath();
      for(var i = 0; i&lt; 1 ; i+=0.05)
      {
              spiral(x, y, 1, 1, pi*i + pi*t -0.05, 10, 500);
      }
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
  
  }
  
  function draw2() {
      for(var i = 0; i&lt;1; i++)
      {
          draw();
      }
      requestAnimationFrame(draw2);
  }
  
  requestAnimationFrame(draw2);
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/mertuarez/L86ekq0b/19/" rel="nofollow noreferrer">https://jsfiddle.net/mertuarez/L86ekq0b/19/</a></p>
  
  <p>Thank you for help.</p>