Added a getCanvas helper function on deck (#7919)

Right now there isn't a way to access the canvas instance [as seems to be suggested](#4436 (comment)), as Typescript forbids it.

* add a getCanvas helper

* documentation and MapboxOverlay.getCanvas

---------

Co-authored-by: Chris Gervang <chrisgervang@users.noreply.github.com>
Co-authored-by: Xiaoji Chen <Pessimistress@users.noreply.github.com>

docs/api-reference/core/deck.md

@@ -587,6 +587,19 @@ Frees all resources associated with this `Deck` instance.
 
 `deck.finalize()`
 
+##### `getCanvas` {#getcanvas}
+
+Get the canvas element attached to this `Deck` instance.
+
+`deck.getCanvas()`
+
+Returns:
+
+* Either an `HTMLCanvasElement` or `null` if one isn't assigned.
+
+Notes:
+
+* See the [canvas](#canvas) prop for more information.
 
 ##### `setProps` {#setprops}
 

docs/api-reference/mapbox/mapbox-overlay.md

@@ -173,6 +173,9 @@ See [Deck.pickMultipleObjects](../core/deck.md#pickmultipleobjects).
 
 Removes the control and deletes all resources.
 
+##### getCanvas
+
+See [Deck.getCanvas](../core/deck.md#getcanvas). When using `interleaved: true`, returns the base map's `canvas`.
 
 ## Remarks
 

modules/core/src/lib/deck.ts

@@ -559,6 +559,11 @@ export default class Deck {
     return this.viewManager.getViewports(rect);
   }
 
+  /** Get the current canvas element. */
+  getCanvas(): HTMLCanvasElement | null {
+    return this.canvas;
+  }
+
   /** Query the object rendered on top at a given point */
   pickObject(opts: {
     /** x position in pixels */

modules/mapbox/src/mapbox-overlay.ts

@@ -177,6 +177,11 @@ export default class MapboxOverlay implements IControl {
     }
   }
 
+  /** If interleaved: true, returns base map's canvas, otherwise forwards the Deck.getCanvas method. */
+  getCanvas(): HTMLCanvasElement | null {
+    return this._interleaved ? this._map.getCanvas() : this._deck.getCanvas();
+  }
+
   private _handleStyleChange = () => {
     resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
   };