How to disable filtering on canvas with webgpu context

Asked Nov 06 '21 at 19:16

Active Nov 08 '21 at 10:51

Viewed 155 times

I use webgpu to render to canvas. I need pixelated result but got blurred. I tried to disable it with css

  .canvas {
    image-rendering: pixelated;
    transform: scale(32);
    transform-origin: top left;
  }

edited Nov 08 '21 at 10:51

asked Nov 06 '21 at 19:16

Defernus

Please include the most relevant parts of your code in the question itself. When you will solve your issue, you will certainly apply the fix on your repo, and the question would be moot, and unable to really help future readers. – Kaiido Nov 09 '21 at 05:18
And to your issue, this is a Chrome bug, please report it at https://crbug.com You can workaround that by forcing a repaint of your canvas though CSS: `.grid { image-rendering: pixelated; transform: scale(32); transform-origin: top left; animation: fix-image-rendering-bug .0001s; } @keyframes fix-image-rendering-bug { from { opacity: 0.9999; } to { opacity: 1; } }` – Kaiido Nov 09 '21 at 05:46
Note that this is very probably related to https://bugs.chromium.org/p/chromium/issues/detail?id=993762, where I did mention this question (which only raise the need for an [MCVE] in the question itself), but I believe opening its own issue for WebGPU is fine. – Kaiido Nov 09 '21 at 06:37

0 Answers0