JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<div id="currentAngle"></div>
<canvas id="canvas" width="400" height="400">
    
</canvas>

CSS

#canvas {
    border:1px solid #000000;
    padding: 10px;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

Math.TAU = Math.PI * 2;

var bigCircleRadius = 180;
var littleCircleRadius = 5;
var currentAngle = -Math.TAU/4;

context.lineWidth = 5;
context.strokeStyle = '#DDDDDD';
    
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, bigCircleRadius ,0,Math.TAU);
context.stroke();

var t=setInterval(tick,1000);
function tick() {
    
    context.lineWidth = 1;
    context.strokeStyle = '#000000';
    
    currentAngle += 0.1;
    var targetX = (canvas.width / 2) + Math.cos(currentAngle) * (bigCircleRadius);
    var targetY = (canvas.width / 2) + Math.sin(currentAngle) * (bigCircleRadius);
    document.getElementById("currentAngle").innerHTML = String(currentAngle);
    
    context.beginPath();
    context.arc(targetX, targetY, littleCircleRadius ,0,Math.TAU);
    context.stroke();
    
    
}