title: Fastest way to draw and fill a NOT anti-aliasing circle in HTML5Canvas
body: <p>I need to draw and fill a not anti-aliased circle for a basic drawing app in HTML5Canvas, because fill bucket tools algorithms dont fill anti-aliased shapes border nicely. </p>
  
  <p>I took the javascript algorithm of this page <a href="https://en.wikipedia.org/wiki/Midpoint_circle_algorithm" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Midpoint_circle_algorithm</a>
  and implement it to draw filled circle, but its very slow.</p>
  
  <pre><code>canvas = document.getElementById("canvas");
  const CHANNELS_PER_PIXEL = 4; //rgba
  
  function drawCircle (x0, y0, radius, canvas) {
  var x = radius-1;
  var y = 0;
  var dx = 1;
  var dy = 1;
  var decisionOver2 = dx - (radius &lt;&lt; 1);   // Decision criterion divided by 2 evaluated at x=r, y=0
  var imageWidth = canvas.width;
  var imageHeight = canvas.height;
  var context = canvas.getContext('2d');
  var imageData = context.getImageData(0, 0, imageWidth, imageHeight);
  var pixelData = imageData.data;
  var makePixelIndexer = function (width) {
      return function (i, j) {
          var index = CHANNELS_PER_PIXEL * (j * width + i);
          //index points to the Red channel of pixel 
          //at column i and row j calculated from top left
          return index;
      };
  };
  var pixelIndexer = makePixelIndexer(imageWidth);
  var drawPixel = function (x, y) {
      var idx = pixelIndexer(x,y);
      pixelData[idx] = 152;   //red
      pixelData[idx + 1] = 152; //green
      pixelData[idx + 2] = 152;//blue
      pixelData[idx + 3] = 255;//alpha
  };
  
  while (x &gt;= y) {
  
      if(x0 + x&gt;=0){drawPixel(x0 + x, y0 + y);}
      if(x0 + y&gt;=0){drawPixel(x0 + y, y0 + x);}
      if(x0 - x&gt;=0){drawPixel(x0 - x, y0 + y);} 
      if(x0 - y&gt;=0){drawPixel(x0 - y, y0 + x);} 
      if(x0 - x&gt;=0){drawPixel(x0 - x, y0 - y);}
      if(x0 - y&gt;=0){drawPixel(x0 - y, y0 - x);}
      if(x0 + x&gt;=0){drawPixel(x0 + x, y0 - y);}
      if(x0 + y&gt;=0){drawPixel(x0 + y, y0 - x);}
  
      //fill circle code
      var x1=x0-x;
      var x2=x0+x;
      var xx=x2-x1;
  
          for(i=x2-x1;i&gt;0; i--){
              if((x1+(xx-i))&gt;=0){
              drawPixel(x1+(xx-i),y0+y);
              }
          }
  
      var x1=x0-y;
      var x2=x0+y;
      var xx=x2-x1;
  
          for(i=x2-x1;i&gt;0; i--){
              if((x1+(xx-i))&gt;=0){
              drawPixel(x1+(xx-i),y0+x);
              }
          }
  
      var x1=x0-x;
      var x2=x0+x;
      var xx=x2-x1;
  
          for(i=x2-x1;i&gt;0; i--){
              if((x1+(xx-i))&gt;=0){
              drawPixel(x1+(xx-i),y0-y);
              }
          }
  
      var x1=x0-y;
      var x2=x0+y;
      var xx=x2-x1;
  
          for(i=x2-x1;i&gt;0; i--){
              if((x1+(xx-i))&gt;=0){
              drawPixel(x1+(xx-i),y0-x);
              }
          }
      //fill end
  
      if (decisionOver2 &lt;= 0) 
      {
          y++;
          decisionOver2 += dy; // Change in decision criterion for y -&gt; y+1
          dy += 2;
      } 
      if (decisionOver2 &gt; 0)
      {
          x--;
          dx += 2;
          decisionOver2 += (-radius &lt;&lt; 1) + dx; // Change for y -&gt; y+1, x -&gt; x-1
      }
  }
  
  context.putImageData(imageData, 0, 0);
  }
  </code></pre>
  
  <p>Also,</p>
  
  <pre><code>context.translate(0.5, 0.5);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>context.imageSmoothingEnabled = !1;
  </code></pre>
  
  <p>dont work for a circle.</p>
  
  <p>Do you have better functions or do you know how to compress and concatenate this circle algorithm ?</p>
  
  <p>Thanks</p>