JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<canvas id="c" width="1024" height="1024"></canvas>
<span id="f">1</span>

CSS

#f {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: 20px;
  background: white;
  text-align: center;
  line-height: 20px;
  padding: 0 5px;
}

JavaScript

const context = c.getContext('2d');
  const size = 4;
  const width = c.width;
  const height = c.height;
  let paused = false;
  let factor = 1;
  function update () {
  	context.clearRect(0, 0, width, height);
    for (let x = 0; x < width / size; x++) {
      for (let y = 0; y < height / size; y++) {
        if (((x) | (y)) % factor) {
          context.fillRect(x*size, y*size, size, size);
        }
      }
    }
  }
  
  frame();
  
  function frame() {
    factor += 1;
  f.innerText = factor;
    update();
    if (!paused) {
    	requestAnimationFrame(frame);
    }
  }
  
  window.addEventListener("click", () => {
  	paused = ! paused;
		if (!paused) {
     frame();
    }
  });