<div class="wrapper">
  <canvas id="canvas"></canvas>
</div>

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
}

canvas {
  image-rendering: pixelated;
}

const canvas = document.getElementById("canvas");
const outputContainer = document.getElementsByClassName("wrapper")[0];
const ctx = canvas.getContext("2d");

canvas.width = outputContainer.offsetWidth;
canvas.height = outputContainer.offsetHeight;

const colors = ["#ede0d4", "#e6ccb2", "#ddb892", "#b08968", "#d0985d"];
const pixelSize = 1;

draw();

function draw() {
  let random = randomNum(1, 3);
  ctx.fillStyle = "#0E7AB0";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let y = 0; y < canvas.height; y += random) {
    random = randomNum(1, 3);

    for (let x = 0; x < canvas.width; x += random) {
      if (random !== 3) {
        ctx.fillStyle = colors[randomNum(0, colors.length - 1)];
        ctx.fillRect(x, y, random, random);
      }
    }
  }
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

canvas.addEventListener("click", draw);