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

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

canvas {
  display: block;
  cursor: pointer;
}

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
  
  This is a re-make of Vera Molnár's Lignes brisées,
felt-tip pen on paper, 1972 
*/
let canvas;
let ctx;
let w, h;

function setup() {
  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.lineCap = "round";
  ctx.lineJoin = "round";
  ctx.lineWidth = 2;
}

function draw() {
  let size = 80;
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, w, h);
  let xTimes = Math.floor(w / size) - 1;
  let marginX = (w - size * xTimes) / 2 + size / 2;
  let yTimes = Math.floor(h / size) - 1;
  let marginY = (h - size * yTimes) / 2 + size / 2;
  for(let x = 0; x < xTimes; x += 1) {
    for(let y = 0; y < yTimes; y += 1) {
      drawFigure(x * size + marginX, y * size + marginY, size);
    }
  }
}

function drawFigure(x, y, size) {
  ctx.save();
  
  ctx.translate(x, y);
  let angle = Math.round(Math.random() * 4) * Math.PI / 2;
  ctx.rotate(angle);
  
  ctx.beginPath();
  ctx.moveTo(Math.random() * size -size / 2, -size / 2);
  ctx.lineTo(Math.random() * size -size / 2, size / 2);
  ctx.lineTo(size / 2, Math.random() * size -size / 2);
  ctx.lineTo(-size / 2, Math.random() * size -size / 2);
  ctx.stroke();
  
  ctx.restore();
}

setup();
draw();