JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<canvas id="c" width="210" height="210"></canvas>
<canvas id="c2" width="210" height="210"></canvas>

JavaScript

var timeout1 = 0,
    timeout2 = 0,
    stepInterval = 50,
    c = document.getElementById('c'),
    ctx = c.getContext('2d');

drawCircle(105, 105, 100, ctx);

function drawCircle(x0, y0, radius, ctx) {
  var x = radius,
      y = 0,
      radiusError = 1 - x;
  while (x >= y) {
      drawPixels(x, y, x0, y0, ctx);
      timeout1 += stepInterval;
      y++;
      if (radiusError < 0) {
          radiusError += 2 * y + 1;
      } else {
          x--;
          radiusError += 2 * (y - x + 1);
      }
  }
}

function drawPixels(x, y, x0, y0, ctx) {
    setTimeout(function () {
        drawPixel(x + x0, y + y0, ctx);
        drawPixel(y + x0, x + y0, ctx);
        drawPixel(-x + x0, y + y0, ctx);
        drawPixel(-y + x0, x + y0, ctx);
        drawPixel(-x + x0, -y + y0, ctx);
        drawPixel(-y + x0, -x + y0, ctx);
        drawPixel(x + x0, -y + y0, ctx);
        drawPixel(y + x0, -x + y0, ctx);
    }, timeout1);
}

function drawPixel(x, y, ctx) {
    ctx.fillRect(x, y, 1, 1);
}

var c2 = document.getElementById('c2'),
    ctx2 = c2.getContext('2d');

function drawCircle2(x0, y0, r) {
    var current = 0,
        step = Math.PI / 200
    while (current < Math.PI * 2) {
        drawPixel2(Math.sin(current) * r + x0,
                  Math.cos(current) * r + y0, ctx2);
        current += step;
        timeout2 += stepInterval;
    }
}

function drawPixel2(x, y, ctx) {
    setTimeout(function () {
    drawPixel(x, y, ctx2);
    }, timeout2);
}

drawCircle2(105, 105, 100);