<canvas id="canvas"></canvas>

body, html {
  margin: 0;
  cursor: pointer;
  overflow: hidden;
}

canvas {
  display: block;
}

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
*/
let canvas;
let ctx;
let w, h;
let size;

function setup() {
  size = 80;
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  reset();
  window.addEventListener("resize", () => {
    reset();
    draw();
  });
  canvas.addEventListener("click", draw);
}

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.lineWidth = 2;
  ctx.lineCap = "round";
  ctx.lineJoin = "round"; 
  ctx.fillStyle = "black";
  ctx.strokeStyle = "white";
}

function draw() {
  ctx.fillRect(0, 0, w, h);
  
  let nrOfFigsX = Math.floor(w / size);
  let leftOverX = w - nrOfFigsX * size;
  let xMargin = leftOverX / 2;
  
  let nrOfFigsY = Math.floor(h / size);
  let leftOverY = h - nrOfFigsY * size;
  let yMargin = leftOverY / 2;
  
  for(let x = 0; x < nrOfFigsX; x += 1) {
    for(let y = 0; y < nrOfFigsY; y += 1) {
      drawFigure(x * size + xMargin, y * size + yMargin, 20);
    }
  }
}

function drawFigure(x0, y0) {
  let positions = [];
  let sideSize = 4;
  let stepSize = size*0.8/(sideSize-1);
  let offset = size*0.1;
  let nrOfPos = sideSize * sideSize;
  for(let i = 0; i < nrOfPos; i++) {
    positions[i] = false;
  }
  let firstPosition = true;
  ctx.beginPath();
  do {
    let index;
    let value;
    do {
      index = Math.floor(Math.random() * nrOfPos);
      value = positions[index];
    } while(value)
    positions[index] = true;
    let x = index % sideSize;
    let y = Math.floor(index / sideSize);
    if(firstPosition) {
      ctx.moveTo(x0 + x * stepSize + offset, y0 + y * stepSize + offset);
    } else {
      ctx.lineTo(x0 + x * stepSize + offset, y0 + y * stepSize + offset); 
    }
    firstPosition = false;
  } while(positions.some(pos => pos === false))
  ctx.closePath();
  ctx.stroke();
}

setup();
draw();