Simple Drawing on Canvas

by Juan Alban Franco

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)*cos(0) - (r+O)*cos(((R+r)/r)*0);
 var y = (R+r)*sin(0) - (r+O)*sin(((R+r)/r)*0);
 ctx.moveTo(x,y);

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