How to use `document.getElementById('canvas');`

Trying sample code from here in start() gives me errors and ‘undefined’
const el = document.getElementById('canvas');

Am I missing something obvious?
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#setting_up_the_event_handlers

Original Post on Discord

by user 103054507105067008

What are you trying to do? Does your canvas have the id canvas ?

e.g. <canvas id="canvas"> ?

For getting “any” canvas use queryElement

For getting the rendering canvas access it via this.context.renderer.domElement

It just seems to be something that touch events seem to require according to Mozilla, I’m trying to work out why using the same syntax for Pointer and Touch events seems to result in only Pointer events working - See Touch here
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#setting_up_the_event_handlers

function startup() {
  const el = document.getElementById('canvas');
  el.addEventListener('touchstart', handleStart);

See Pointer here
https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event#syntax

addEventListener('pointerdown', (event) => {});

onpointerdown = (event) => { };

by user 103054507105067008

I would have assumed I could do something like this but nothing fires for touches document.addEventListener('touchstart', this.touched());, touched() is just a function I made

by user 103054507105067008

Just saw your github comment, I’ll close this for now as the document canvas is probably just a red herring

by user 103054507105067008

It works on my minimap experiment, when I use it like this:

by user 474974683163394049

And the index.html looks like this:
image.png

by user 474974683163394049

That makes sense to me, thanks for the example :slightly_smiling_face:

by user 103054507105067008