Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Canvas interpolation test</title>
  <script>
    const offScreenCanvas = document.createElement('canvas');
    offScreenCanvas.width = 4;
    offScreenCanvas.height = 4;
    const offScreenCanvasCtx = offScreenCanvas.getContext('2d');
    const imageData = offScreenCanvasCtx.createImageData(4, 4);
    const view = new Uint32Array(imageData.data.buffer);

    for (var i = 0; i < 16; i++) {
      view[i] = 255 << 24;
    }
    view[0] = -1; view[3] = -1; view[12] = -1; view[15] = -1;

    offScreenCanvasCtx.putImageData(imageData, 0, 0);

    const canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;
    const ctx = canvas.getContext('2d');
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(offScreenCanvas, 0, 0, 256, 256);

    window.onload = () => {
      document.body.appendChild(canvas);
    }
  </script>
</head>
<body>
  <p>ready</p>
</body>
</html>