Way of saving canvas to image in deck.gl

Hi, I want to save the webgl canvas to image by using toDataURL or gl.readPixels and have some questions:

• In order to read from canvas, seems I need to use deck.redraw() to trigger the render and read from framebuffer. Since I am using <DeckGL> in React and, according to the code the this.deck is not exposed from <DeckGL>, how could I achieve this without passing customized deck instance? Use ref.current.deck.redraw(true)
• What is your recommendation of the way saving canvas to image, in deck.gl? Thanks!

[Pessimistress]

The general idea:

let screenshotCb = null;
const myDeckInstance = new deck.Deck({
  ...
  glOptions: {
    preserveDrawingBuffer: true  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
  },
  onAfterRender: () => {
    if (screenshotCb) {
      screenshotCb(myDeckInstance.canvas.toDataURL());
      screenshotCb = null;
    }
  }
});

[tsherif]

Great! It doesn’t look like you need that html2canvas tool though. Deck.gl maintains a reference to its canvas. I believe the rest of your code will work the same way, i.e.

let canvas = $scope.scatterLayer.canvas;
document.body.appendChild(canvas);
let a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'screenshot.png';
a.click();