JSFiddle - React, Tailwind, and code Playground

by MimiE

HTML

<button onclick="drawCircle();">Draw Circle</button>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

function drawCircle() {
 var c = document.getElementById("myCanvas");
 var R = c.width/2;
 var ctx = c.getContext("2d");

 var x = R+R*Math.cos(0);
 var y = R+R*Math.sin(0);
 ctx.moveTo(x,y);

 for (var t = 0; t <= 2*Math.PI; t+=0.1) {
   x = Math.floor(R+R*Math.cos(t));
   y = Math.floor(R+R*Math.sin(t));
   ctx.lineTo(x,y);
   ctx.stroke();
 }
}
x = (R+r)*cos(t) - (r+O)*cos(((R+r)/r)*t)

	y = (R+r)*sin(t) - (r+O)*sin(((R+r)/r)*t)