JSFiddle - React, Tailwind, and code Playground

by Ben Centra

HTML

<canvas id="canvas" width="600" height="400" tabindex="1"></canvas>

CSS

#canvas {
  width: 600px;
  height: 400px;
  border: 1px solid black;
}

JavaScript

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

function erase() {
	context.fillStyle = '#FFFFFF';
  context.fillRect(0, 0, 600, 400);
}

function draw() {
	erase();
	context.fillStyle = '#FF0000';
	context.fillRect(25, 25, 50, 50);
  window.requestAnimationFrame(draw);
}

draw();
canvas.focus();