JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<canvas id="canvas" width="500" height="500">Your browser doesn't support canvas. Get it together.</canvas>

CSS

#canvas {
    border: solid 1px #000;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    startx = 250,
    starty = 100,
    frameRate = 1000 / 30;

function drawParticle (x, y, w, h, color) {
    context.fillStyle = (color || '#000000');
    context.fillRect(x, y, w, h);
}

function drawCircle(x, y, radius, size) {
    context.arc(x, y, radius, 0, Math.PI*2, false);
    context.fill();
    context.stroke();
}

function render () {
    //context.clearRect(0, 0, canvas.width, canvas.height);
    //drawParticle(startx, starty, 5, 5);
    drawCircle(startx, starty, 20);
}

render();
//setInterval(render, frameRate);