JSFiddle - React, Tailwind, and code Playground

by theblang

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas {
    width: 700px;
    height: 500px;
    border: 1px solid; 
}

JavaScript

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

context.translate(50, 50);

function drawShapes() {
    context.save();
    
    context.fillRect(0, 0, 50, 50);
    
    context.fillStyle = "rgba(255, 0, 0, 1)";
    
    context.translate(-30, 30);
    context.beginPath();
    context.arc(0, 0, 10, 0, 2 * Math.PI);
    context.fill();
    
    context.translate(115, 0);    
    context.beginPath();
    context.arc(0, 0, 10, 0, 2 * Math.PI);
    context.stroke(); 
    
    context.restore();
}

var delta = 0;
function animate(current) {
    delta += 0.1;
    context.rotate(delta * Math.PI);   
    drawShapes();
    
    window.webkitRequestAnimationFrame(animate);
}

window.webkitRequestAnimationFrame(animate);