JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<canvas id="canvas" width="600" height="600"></canvas>
<canvas id="canvas2" width="600" height="600"></canvas>
<canvas id="canvas3" width="600" height="600"></canvas>
<canvas id="canvas4" width="600" height="600"></canvas>

CSS

#canvas{
  
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas.getContext('2d');
var canvas3 = document.getElementById("canvas3");
var ctx3 = canvas.getContext('2d');
var canvas4 = document.getElementById("canvas4");
var ctx4 = canvas.getContext('2d');
var bars = 180;
var radius = 220;
var bars2 = 360;
var radius2 = 193;
var bars3 =  4;
var radius3 = 200;
var bars4 =  72;
var radius4 = 200;
for(var i = 0; i < bars; i++){
  var x = radius*Math.cos(degrees_to_radians(i*2));
  var y = radius*Math.sin(degrees_to_radians(i*2));
  draw_rectangle(x+250,y+250,1,15,i*2, ctx );
  
}
for(var i = 0; i < bars2; i++){
  var x = radius2*Math.cos(degrees_to_radians(i*1));
  var y = radius2*Math.sin(degrees_to_radians(i*1));
  draw_rectangle(x+250,y+250,1,5,i*1, ctx2 );
  
}
for(var i = 0; i < bars3; i++){
  var x = radius3*Math.cos(degrees_to_radians(i*90));
  var y = radius3*Math.sin(degrees_to_radians(i*90));
  draw_rectangle(x+250,y+250,2,25,i*90, ctx3 );
  
}
for(var i = 0; i < bars4; i++){
  var x = radius4*Math.cos(degrees_to_radians(i*5));
  var y = radius4*Math.sin(degrees_to_radians(i*5));
  draw_rectangle(x+250,y+250,1,20,i*5, ctx4 );
  
} 



function draw_rectangle(x,y,w,h,deg, ctx){
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(degrees_to_radians(deg+90));
  ctx.fillStyle = "#000000";
  ctx.fillRect(-1*(w/2), -1*(h/2), w, h);
  ctx.restore();
}
function degrees_to_radians(degrees){
  return degrees * Math.PI / 180;
}
function radians_to_degrees(radians){
  return radians * 180 / Math.PI;
}