如何禁用带WebGPU上下文的canvas过滤效果，实现像素化渲染

问题原因与解决步骤 #

导致你设置了CSS像素化规则依然模糊的核心原因是WebGPU渲染管线内部逻辑、canvas尺寸配置的优先级高于浏览器层面的CSS渲染规则，可按以下步骤逐一排查修复：

• 修正canvas尺寸配置
  不要仅通过CSS设置canvas的展示大小，必须显式设置canvas元素本身的width/height属性为你期望的低分辨率像素尺寸（例如你要渲染16x16的像素画布，就写<canvas width="16" height="16"></canvas>），CSS仅保留transform: scale(32)做展示放大，不要额外设置CSS层面的width/height属性。
• 配置WebGPU采样器为近邻采样
  WebGPU内部的纹理采样过滤默认会做插值模糊，不受CSS规则控制，你需要在创建采样器时将所有过滤规则设为近邻模式：

  const pixelSampler = gpuDevice.createSampler({
    minFilter: 'nearest',
    magFilter: 'nearest',
    mipmapFilter: 'nearest'
  })
  

  渲染管线绑定的纹理采样器必须使用上述配置。
• 强制WebGPU画布配置匹配canvas原生尺寸
  高分屏场景下如果配置WebGPU上下文时乘以了设备像素比devicePixelRatio，会导致画布实际物理分辨率被拉高，造成像素模糊，需要强制上下文尺寸与canvas的width/height属性对齐：

  const ctx = canvas.getContext('webgpu')
  ctx.configure({
    device: gpuDevice,
    format: navigator.gpu.getPreferredCanvasFormat(),
    size: [canvas.width, canvas.height], // 不要乘以devicePixelRatio
    alphaMode: 'opaque'
  })
  

• 补充CSS兼容规则
  部分浏览器需要添加兼容属性才能正确生效像素化渲染，可调整你的CSS代码为：

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

内容的提问来源于stack exchange，提问作者Defernus