Spirograph

by dhizzybusy

HTML

<div class="d-flex flex-column mt-4">
  <div class="d-flex justify-content-center">
    <center>
      <p>Spirograph</p>
    </center>
  </div>
  <br>
  <center>
    <div class="d-flex justify-content-center mt-4">
      <button class="btn btn-primary" onclick="doDrawing();">Start Drawing</button>
      <button class="ml-1 btn btn-primary" onclick="stopDrawing();">Stop Drawing</button>
    </div>
  </center>
  <br><br>
  <div class="d-flex justify-content-center mt-4">
    <center>
      <canvas id="myCanvas" width="400" height="400" style="border: 0;">
      </canvas>
    </center>
  </div>
</div>

JavaScript

var
  R = 95,
  r = 35,
  O = 60,
  tInc = 75.9,
  t = 0,
  maxRun = 500,
  c = document.getElementById("myCanvas"),
  posX = (c.width / 2),
  posY = (c.height / 2),
  ctx = c.getContext("2d"),
  timesRun;

function doDrawing() {
  timesRun = 0;
  ctx.clear();
  ctx.beginPath();
  ctx.strokeStyle = '#' + Math.floor(Math.random() * 16777215).toString(16);
  ctx.moveTo(posX, posY);
  var interval = setInterval(function() {
    timesRun += 1;
    if (timesRun === maxRun) {
      clearInterval(interval);
    }
    drawCircle();
  }, 1);
}

function drawCircle() {
  t += tInc;
  var x = Math.floor(posX + (R - r) * Math.cos(t) + O * Math.cos(((R - r) / r) * t));
  var y = Math.floor(posY + (R - r) * Math.sin(t) - O * Math.sin(((R - r) / r) * t));
  ctx.lineTo(x, y);
  ctx.stroke();
}

function stopDrawing() {
  timesRun = maxRun - 1;
}

CanvasRenderingContext2D.prototype.clear =
  CanvasRenderingContext2D.prototype.clear || function(preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }
    this.clearRect(0, 0, this.canvas.width, this.canvas.height);
    if (preserveTransform) {
      this.restore();
    }
  }