Skip to content

getCanvas2DContext

getCanvas2DContext(layer?: keyof typeof canvasLayer, inCanvas?: HTMLCanvasElement | null): CanvasRenderingContext2D | null Helper method to get the canvas 2D context from the specified layer. There are 3 layers that get setup, the main layer where most of the renderings will happen, a top layer where you can show independent elements like live user cursor position and the internal layer. There is a second optional param where you can pass the html canvas itself to get it's 2d context ( this is only used internally in one place ).

Parameters

  • layer: (Optional) Specifies the canvas layer to target. Acceptable values are 'main', 'top', or 'internal', with 'main' being the default if no layer is specified.
  • inCanvas: (Optional) The HTML canvas element from which to obtain the 2D context.

Returns

Returns the CanvasRenderingContext2D object for the specified canvas layer, allowing direct manipulation and rendering onto the canvas. For detailed information on the CanvasRenderingContext2D API, visit the MDN documentation

Example usage

ts
const drawSomething = () => {
  const ctx = getCanvas2DContext();
  if(!ctx) return
  // rest
}

CAUTION

Use the internal layer sparingly and only when absolutely necessary, as it is intended for specific internal operations of the library. Accessing or modifying the internal layer without a clear understanding of its role within the library can lead to unexpected behavior.

Released under the MIT License.