Minimal example of making screenshot of WebGPU canvas

webgpu-screenshot.js

//Tested on Chrome Canary Version 94.0.4598.0, macOS 11.5

const canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 512;
document.body.appendChild(canvas);

const clearColor = {
  r: Math.random(),
  g: Math.random(),
  b: Math.random(),
  a: 1.0,
};

let renderPassDescriptor = {
  colorAttachments: [
    {
      loadValue: clearColor,
      storeOp: "store",
      view: null,
    },
  ],
};

async function init() {
  const adapter = await window.navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();

  const ctx = canvas.getContext("webgpu");

  ctx.configure({
    device: device,
    format: "bgra8unorm",
    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC, //if you skipt this you will get transparent png
  });

  const link = document.createElement("a");
  let download = true
  
  function draw() {
    const commandEncoder = device.createCommandEncoder();

    renderPassDescriptor.colorAttachments[0].view = ctx
      .getCurrentTexture()
      .createView();

    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.endPass();

    device.queue.submit([commandEncoder.finish()]);

    if (download) {
      download = false
      canvas.toBlob(
        (blob) => {
          link.download = "Screenshot " + new Date() + ".png";
          link.href = URL.createObjectURL(blob);
          link.dispatchEvent(new MouseEvent("click"));
        },
        "image/png",
        1
      );
    }

    requestAnimationFrame(draw);
  }

  draw();
}

init();

More discussion here: https://github.com/austinEng/webgpu-samples/issues/127#issuecomment-907467299