Skip to content

How to understand the useCanvas() hook? #346

@nene

Description

@nene

On first glance I though that this would be a useful hook to access the HTML <canvas> element on which the engine runs. Even the documentation says:

/**
 * Get the canvas DOM element from the context.
 */

But the types tell a different story:

export const useCanvas = (): Nullable<HTMLCanvasElement | WebGLRenderingContext>

The way I read it is that this hook might return a canvas or it might instead return WebGL context. I'm trying hard... but this makes no sense to me. Why would I use this hook? I can't use it to reliably access canvas. I also can't use it to reliably access WebGL context.

Well... given that I can access the canvas through WebGL context and also the other way around, I guess I could write some conditionals after this hook, like:

const maybeCanvas = useCanvas();
const canvas = maybeCanvas instanceof WebGLRenderingContext ? maybeCanvas.canvas : maybeCanvas;

But this feels silly.

Currently I have just implemented by own hook:

function useRenderingCanvas() {
  const engine = useEngine();
  return engine?.getRenderingCanvas();
}

So it's not really a problem for me any more. But it would still be good to understand the purpose of this useCanvas() hook.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions