canvasZone is not defined when you download the code

https://www.babylonjs-playground.com/#MIRQ0H#8

This sample works ok but if I download it canvasZone is undefined even if I try to get it manually like

var canvasZone = document.getElementById(‘canvasZone’);

Any tip?

The div just isn’t there. Maybe it’s something for just the PG.

If you wrap everything in the body with a canvasZone div, it works again. Im pretty baffled how this works downloaded considering canvasZone isn’t declared anywhere :confounded:

The playground is split into an editor and display area. The canvaszone is the holder div for the canvas to display the rendering. When you download a PG there is no need for an editor section so no holder needed for the canvas other than the body.

1 Like

I’ve tried to create canvasZone on my own

but now there appears the issue I was trying to debug with that sample
Babylon.js sample code the behavior when you use it on a mobile device (or you fake it by using dev tools and set the device as a mobile) is different than in a computer, in computer when the div goes out of the canvas everything seems to be ok, but in mobile the canvas is resized.

This doesn’t happen on the playground sample.

Thank you in advance.

PS. adding
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> is even more weird.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1>

Was the key