JSFiddle - React, Tailwind, and code Playground

by Mike Kerney

HTML

<input type="button" onClick="drawSpirograph(context, canvas.width / 2, canvas.height / 2, 100, 20, 10);" value="Draw">

JavaScript

var t = 0;
var c = document.getElementById("myCanvas");
var R = c.width/2;
var ctx = c.getContext("2d");

function drawSpirograph() {
  var x =  R+R*Math.cos(0);
  var y =  R+R*Math.sin(0);
  var theta;

ctx.clear()
  // Move to starting point (theta = 0)
  ctx.beginPath();
  ctx.moveTo(x,y);

  // Draw segments from theta = 0 to theta = 2PI
  for (theta = 0; theta <= Math.PI * 2; theta += 0.01) {
    x = cx + radius1 * Math.cos(theta) + radius2 * Math.cos(theta * ratio);
    y = cy + radius1 * Math.sin(theta) + radius2 * Math.sin(theta * ratio);
    context.lineTo(x, y);
  }

  // Apply stroke
  ctx.stroke();
}

// Get drawing context
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// Draw spirograph
//drawSpirograph(context, canvas.width / 2, canvas.height / 2, 100, 20, 10);