JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Drawing on the HTML5 Canvas -->
<canvas id="drawing"></canvas>

JavaScript

/*
 *  The notProcessing <canvas> notLibrary!
 */

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

// p.size(400, 400);
canvas.width = 400;
canvas.height = 400;

// If you want to use mouseX and mouseY
var mouseX = 0;
var mouseY = 0;
canvas.onmousemove = function (e) {
    mouseX = e.pageX - canvas.offsetLeft;
    mouseY = e.pageY - canvas.offsetTop;
};

// If you want to use mousePressed
var mousePressed = false;
canvas.onmousedown = function (e) {
    mousePressed = true;
};
canvas.onmouseup = function (e) {
    mousePressed = false;
};

// If you want to use these mouse variables with touchscreens as well
canvas.ontouchmove = function (e) {
    // Don't scroll
    e.preventDefault();
    // Just looks at first finger
    mouseX = e.targetTouches[0].pageX - canvas.offsetLeft;
    mouseY = e.targetTouches[0].pageY - canvas.offsetTop;
}
canvas.ontouchstart = function (e) {
    mousePressed = true;
    canvas.ontouchmove(e);
};
canvas.ontouchend = function (e) {
    mousePressed = false;
};


// Keyboard interaction
var key;
var keyPressed = false;
var SPACE = 32;
var LEFT = 37;
var UP = 38;
var RIGHT = 39;
var DOWN = 40;
document.onkeydown = function (e) {
    key = e.keyCode;
    keyPressed = true;
};
document.onkeyup = function (e) {
    keyPressed = false;
};


/*
  Fill and stroke color are set like any CSS color. For example:
    "red"
    "#FF0000"
    "rgb(255, 0, 0)"
    "hsl(0, 100%, 50%)"
  Alpha transparency from 0.0 to 1.0:
    "rgba(255, 0, 0, 0.5)"
    "hsla(0, 100%, 50%, 0.5)"
*/

// p.background(0, 0, 0);
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);

// p.stroke(255, 255, 255);
context.strokeStyle = "#FFFFFF";

// p.fill(255, 0, 0);
context.fillStyle = "red";

// p.strokeWeight(6);
context.lineWidth = 6;

// Think τ! https://www.khanacademy.org/math/vi-hart/v/pi-is--still--wrong
var TAU = 2 * Math.PI;

// p.ellipse(200, 200, 150, 150); (just circles, ellipses are...