draw.js

function normalizeMatrix(matrix) {
  const maxValue = matrix.reduce((max, row) => {
    return row.reduce((max, value) => Math.max(value, max));
  }, -Infinity);

  return matrix.map((row) => {
    return row.map((val) => val / maxValue);
  });
}

function draw(matrix, canvas) {
  const ctx = canvas.getContext("2d");
  const normalizedMatrix = normalizeMatrix(matrix);
  ctx.beginPath();
  normalizedMatrix.forEach((pixelsRow, rowIndex) => {
    const y = rowIndex * MATRIX_DIMENSIONS.pixelHeight;
    pixelsRow.forEach((pixel, pixelIndex) => {
      const x = pixelIndex * MATRIX_DIMENSIONS.pixelWidth;
      ctx.fillStyle = getColor(pixel);
      ctx.fillRect(
        x,
        y,
        MATRIX_DIMENSIONS.pixelWidth,
        MATRIX_DIMENSIONS.pixelHeight
      );
    });
  });
  ctx.closePath();
}