JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<canvas id="c" height="100" width="100"></canvas>
<input type="range" min="0" max="100" id="r">

JavaScript

let angle;
setAngle();
function setAngle() {
	angle = r.value / 100 * Math.PI * 2;
}

r.addEventListener("input", setAngle);


function draw() {
	let ctx = c.getContext("2d");
  ctx.clearRect(0, 0, 100, 100);
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(50 + Math.cos(angle)*10, 50 + Math.sin(angle)*10);
  ctx.stroke();
  
  
  window.requestAnimationFrame(draw);
}

draw();