JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

Save

JavaScript

var canvas = document.createElement('canvas'),
    c = canvas.getContext('2d'),
    WIDTH = canvas.width = window.innerWidth,
    HEIGHT = canvas.height = window.innerHeight;

canvas.addEventListener('resize', function () {
    WIDTH = canvas.width = window.innerWidth;
    HEIGHT = canvas.height = window.innerHeight;
});

document.body.appendChild(canvas);

var angle = 45 * Math.PI/180,
    speed = 0.1,
    posX = WIDTH/2 + Math.cos(angle) * 125,
    posY = HEIGHT/2 + Math.sin(angle) * 125;

function centerCircle () {
    c.save();
    c.strokeStyle = 'black';
    c.beginPath();
    c.arc(WIDTH/2, HEIGHT/2, 125, 0, Math.PI*2, true);
    c.closePath();
    c.stroke();
    c.restore();
}

function rotatingCircle () {
    c.save();
    c.fillStyle = 'black';
    c.beginPath();
    c.arc(posX, posY, 15, 0, Math.PI*2, true);
    c.closePath();
    c.fill();
    c.restore();    
}

function loop () {
    c.clearRect(0, 0, WIDTH, HEIGHT);    
    centerCircle();
    posX = WIDTH/2 + Math.cos(angle) * 125,
    posY = HEIGHT/2 + Math.sin(angle) * 125;    
    rotatingCircle();
    angle += Math.sin(speed);
}

setInterval(loop, 1000/33);