<canvas id="canvas" width="200" height="200">

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
canvas {
  border: 1px solid #000;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
        ctx.strokeStyle = 'rgb(255, ' + Math.floor(255 - 42.5 * i) + ', ' + 
                         Math.floor(255 - 42.5 * j) + ')';
        ctx.beginPath();
        ctx.strokeRect(j * 25, i * 25, 25,  25);
        ctx.stroke();
      }
    }

ctx.fillStyle = 'rgba(46, 196, 182, 0.5)';
ctx.fillRect(25,25,100,100);

ctx.fillStyle = 'rgba(231, 29, 54, 0.5)';
ctx.fillRect(75,75,100,100);