Как исправить: рендеринг изображений: пиксельные ошибки

Question

Я сделал эту страницу: https://loving -jepsen-c6f1de.netlify.com / Он рисует пиксельное изображение на холсте, получая данные из файла json. Я использовал css свойство image-рендеринг: пикселированный на холсте, чтобы это работало. Но когда я изменяю размер окна в инструментах разработчика chome, холст дрожит, и холст теряет пикселизацию. Что больше Он теряет пикселизацию, когда я изменяю размер окна, нажимая «открыть в полном окне».

Я использовал devtools, чтобы найти что-то не так, он показал, что холст все еще имеет свой рендеринг изображения: пикселизированный (но на самом деле он не работает).

JS для первого изображения (4x4):

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

let btn_load_4x4 = document.getElementById('btn_load_4x4');
btn_load_4x4.addEventListener('click', fillCanvas4x4);

function fillCanvas4x4() {
  fetch(
    'https://raw.githubusercontent.com/rolling-scopes-school/tasks/master/tasks/stage-2/codejam-canvas/data/4x4.json'
  )
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data) {
      canvas.width = 4;
      canvas.height = 4;
      let colors = data.map(el => el.map(el => '#' + el));
      for (let i = 0; i < canvas.width; i++) {
        for (let j = 0; j < canvas.height; j++) {
          ctx.fillStyle = colors[i][j];
          ctx.fillRect(i, j, 1, 1);
        }
      }
    });
}

CSS:

.canvas {
  width: 512px;
  height: 512px;
  padding: 20px;
  image-rendering: pixelated;
}