JSFiddle - React, Tailwind, and code Playground

by quangcanh2975

HTML

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

</body>
</html>

JavaScript

function toRad(angle){
  return angle*Math.PI/180;
}

function isValidNumber(inputNum, validMin, validMax){
  if(inputNum < validMin || inputNum > validMax){
    return false;
  }
  return true;
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function drawObject1(x,y){
  ctx.save();
  ctx.translate(x,y);
    ctx.fillStyle="black";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(100,-50);
    ctx.lineTo(100,50);
    ctx.lineTo(0,0);
    ctx.fill();
    ctx.stroke();
  ctx.restore();
}
function drawObject(x,y){
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  const width =600;
  const height = 600;
  const MID = width/2;
  const GROUND = 600;
  ctx.save();
    
  ctx.translate(x,y);
  ctx.fillStyle="black";
  ctx.beginPath();
  ctx.fillRect(0,0,100,50);
  ctx.restore();
}
var cats = prompt("Enter objects number(1 to 10):");
while(isValidNumber(cats,0,10)===false){
    cats = prompt("Enter objects number(1 to 10):");
}

var distance = prompt("What is the radius(0 to 200):");
while(isValidNumber(distance,0,200)===false){
    distance = prompt("What is the radius(0 to 200):");
}

/*
var objects=toRad(360/cats);
for(var i = 0; i < cats; i++){
var x = Math.round(Math.cos(toRad(i*360/cats)))*distance;
var y = Math.round(Math.sin(toRad(i*360/cats))*distance);
console.log(x);
console.log(y);
/*
ctx.save();
ctx.rotate(toRad(i*360/cats));

drawObject(x  + 300,y + 300);
//ctx.restore();
}
*/

var objects=toRad(360/cats);
ctx.translate(300,300);
ctx.save();

for(var i = 0; i < cats; i++){

//var x = Math.cos(toRad(360/cats))*distance;
//var y = Math.sin(toRad(360/cats))*distance;
var x = distance;
var y = 0;
console.log(x);
console.log(y);
drawObject1(x,y);
ctx.rotate(objects);
}

//drawObject1(100,100);
ctx.restore();