JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>scratch ticket test</h1>
<p>by frogggeee</p>
<canvas id = "canvas" width = "200" height = "200"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mouseX = 0;
let mouseY = 0;
let cX = 0;
let cY = 0;
let sX = [];
let sY = [];
let sT = [];
let erased = 0;
let down = false;
let thing = ["", "$500", "$200", "$100", " $50", " $20", " $10", "  $5", "  NA", "  NA"];
let prizes = [];
let grid = [];
for (let o = 0; o < thing.length; o++) {
	for (let i = 0; i < o; i++) {
  	prizes.push(thing[o]);
  }
}
for (let z = 0; z < 9; z++) {
	grid.push(prizes[Math.floor(Math.random() * prizes.length)]);
}
let img = new Image();
img.src = "https://www.insidescience.org/sites/default/files/5_heic1808a_crop.jpg";
document.addEventListener("mousemove", function moved(e) {mouseX = e.clientX; mouseY = e.clientY - 100;});
document.addEventListener("mousedown", function onDown(e) {cX = e.pageX; cY = e.pageY; down = true; });
document.addEventListener("mouseup", function onUp(e) {down = false});
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
let x = 0;
let y = 0;
for (i = 0; i < 100; i++) {
	for (let g = 0; g < 100; g++) {
  	sX.push(x);
    sY.push(y);
    sT.push(true);
  	x += 2;
  }
  y += 2;
  x = 0;
}
function text(text, x, y, px, color) {
		ctx.beginPath();
    ctx.font = px + "px Roboto Mono";
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
    ctx.closePath();
}
function render() {
ctx.clearRect(0, 0, 400, 400);
//ctx.drawImage(img, 0, 0, 900, 530, 0, 0, 900 / 2, 530 / 2);
x = 0;
y = 0;
let count = 0;
for ( i = 0; i < 3; i++) {
	for (z = 0; z < 3; z++) {
  	block(67 * x, 67 * y, 65, 65, "black");
    text(grid[count], (67 * x) - 1, (67 * y) + 45, 30, "white");
  	x++;
    count++;
  }
  y++;
  x = 0;
}
	for (i = 0; i < sT.length; i++) {
  	if (sT[i] == true) {
    	block(sX[i], sY[i], 2, 2, "grey");
      if (mouseX >...