JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle="skyblue";
context.strokeStyle="gray";
context.lineWidth=3;

var circle1 = {
    x: 50,
    y: 50,
    radius: 25,
}
var circle2 = {
    x: 100,
    y: 100,
    radius: 25,
}

var circles = [];

circles.push(circle1);
circles.push(circle2);

var frameCount = 0;

animate();

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < circles.length; i++) {
        var c = circles[i];
        context.beginPath();
        context.arc(c.x, c.y, c.radius, 0, Math.PI * 2);
        context.closePath();
        context.fill();
        context.stroke();
    }
}

function animate() {
    if (frameCount < 160) {
        requestAnimationFrame(animate);
    }
    circles[0].x += 1;
    circles[1].y += 1;
    draw();
    frameCount++;
}