JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<canvas id = "canvas" width = "200" height = "360" style = "border: 3px solid"></canvas>
<script>
  let ctx = document.getElementById("canvas").getContext("2d");
	let x = 0;
  let y = 12;
  let w = 3; // width of row
  let mx = 1;
  let interval = 150; // 200 milliseconds
  let cx;
  let cy;
  let down = true;
  document.addEventListener("mousedown", function (e) {
	let rect = document.getElementById("canvas").getBoundingClientRect();
	cx = e.pageX - rect.left;
	cy = e.pageY - rect.top;
  down = true;
});
document.addEventListener("mouseup", function(e){
  if (down == true) {
		
  }
});
  function rec(x, y){
  	ctx.beginPath();
  	ctx.rect(x, y, 28, 28);
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();
  }
  function render() {
  	ctx.clearRect(0, 0, 1000, 1000);
    // background
  	ctx.fillStyle = "grey";
  	ctx.fillRect(0, 0, 1000, 1000);
    x += mx;
    if (x+w > 6) {
    	mx = -1;
    } else if (x <= 0) {
    	mx = 1;
    }
    for (let i = 0; i < w; i++) {
    	rec((x*28)+(i*28), y*28);
    }
  
  }
  setInterval(render, interval);

</script>