Export png from deckl map - mapbox-gl-js

Question

I'm using react-map-gl with deck.gl to load layers into mapbox.
I'm trying to export a png image of the map with layers but when download the image doesn't show the layers.
The layers are: one GeojsonLayer and one HexagonalLayer.
How can show layers in my png??
<MapGL
ref={this.mapRef}
{...viewport}
className="mapbox"
mapStyle={mapStyle}
mapboxApiAccessToken={MAPBOX_TOKEN}
preserveDrawingBuffer={true}
attributionControl={false}
onLoad={this.handleLoad}
onViewportChange={(viewport) => {
viewport.width = "100%";
viewport.height = "400px";
this.setState({ viewport });
}}
>
<DeckGL layers={layers} onHover={this.onHoverDeckgl} viewState={viewport} />
</MapGL>;
// This is my method to download the image.
downloadImage = () => {
const fileName = `${"Mapa"}_${moment().format(
"DD_MM_YYYY_ HH_mm"
)}.png`;
const canvas = this.state.mapGL.getCanvas();
canvas.toBlob(blob => {
FileSaver.saveAs(blob, fileName);
});
};

Answer 1

Finally, I did it!!!
I fould a solution to combine canvas from mapbox and canvas from deckgl.
Aadd id to Deckgl Component and ref
return (
<DeckGL
id="deck-gl-canvas"
ref={this.deckRef}
layers={layers}
onHover={this.onHoverDeckgl}
onLoad={this.handleLoad}
viewState={viewport}
>
{this.renderTooltip()}
</DeckGL>
);
// pass deck reference where will be action to download image
handleLoad = () => {
const deck = this.deckRef.current.deck;
this.props.onGetDeckGL(deck);
};
add ref to Mapbox Component and pass will be the action to download image
Call redraw to deck
Combine canvas on a third canvas
downloadImage = () => {
const fileName = "Map.png";
const { mapGL, deck } = this.state;
const mapboxCanvas = mapGL.getCanvas(
document.querySelector(".mapboxgl-canvas")
);
deck.redraw(true);
const deckglCanvas = document.getElementById("deck-gl-canvas");
let merge = document.createElement("canvas");
merge.width = mapboxCanvas.width;
merge.height = mapboxCanvas.height;
var context = merge.getContext("2d");
context.globalAlpha = 1.0;
context.drawImage(mapboxCanvas, 0, 0);
context.globalAlpha = 1.0;
context.drawImage(deckglCanvas, 0, 0);
merge.toBlob(blob => {
FileSaver.saveAs(blob, fileName);
});
};