JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "400" height = "400" ></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
let turn = 0;
let grid = [0000000, 0000000, 0000000, 0000000, 0000000, 0000000];
document.addEventListener("mousedown", function down(e) {
	let cX = e.pageX;
  let cY = e.pageY;
});
document.addEventListener("mousemove", function move(e) {
	 mX = e.clientX;
   mY = e.clientY;
  let snap = 45;
  mX = (Math.round((mX) / snap)) * snap;
  mY = (Math.round(mY / snap)) * snap;
});
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function render() {
	ctx.clearRect(0, 0, 400, 400);
  let x = 30;
  let y = 70;
  for (let count = 0; count < 6; count++) {
  	for (let i = 0; i < 7; i++) {
    	block(x, y, 40, 40, "black");
      if (grid[count].charAt(i) == 1) {
        block(x, y, 40, 40, "red");
      } else if (grid[count].charAt(i) == 2) {
      	block(x, y, 40, 40, "yellow");
      }
      x += 45;
    }
    y += 45;
    x = 30;
  }
  block(mX - 15, 25, 40, 40, "red");
  
}
setInterval(render, 10);
</script>
</body>
</head>
</html>