JSFiddle - React, Tailwind, and code Playground

by Anisuzzaman Khan

HTML

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


var n = 20 // <-- this is your input
var step = 2/n
var inc = step/2

// inner circle
for (i=1.0; i<=3.0; i+=step) {
  ctx.beginPath();
  ctx.arc(150, 100, 50, i*Math.PI, (i+inc)*Math.PI)
  ctx.stroke();
}

// outer circle
for (i=1.5; i<=3.5; i+=step) {
  ctx.beginPath();
  ctx.arc(150, 100, 70, i*Math.PI, (i+inc)*Math.PI)
  ctx.stroke();
}

/* Function Reference

context.arc(x, y, r, sAngle, eAngle, counterclockwise);

// parameters
x	-> The x-coordinate of the center of the circle	
y	->The y-coordinate of the center of the circle	
r	->The radius of the circle	
sAngle -> The starting angle
eAngle -> The ending angle
counterclockwise -> specifies whether the drawing should be counterclockwise true or false
 
*/