Inspector is not showing when using a canvas created with document.createElement

Bugs
1

I have a dynamically created canvas element (because of some problems with Vue reactivity of some ref properties in my game-class):

const canvas = document.createElement('canvas');
canvas.style.outline = 'none';

I then create an instance of my game class (which does all the Babylon work). In the constructor I pass the canvas, which is then used in the game class to create the engine, scene, etc.:

let game = new Game(canvas);

Then in onMounted I do:

const canvasdiv = document.getElementById('canvasdiv');
  if (canvasdiv) {
    canvas.width = canvasdiv.clientWidth;
    canvas.height = canvasdiv.clientHeight;
    canvasdiv.appendChild(canvas);
  }

  game.init();

This works very well, but the only strange thing is that the Babylon inspector is not visible.
I found out that this is because the div with id="embed-host" has a position: relative . I’m guessing it has something to do with the dynamically created canvas, because it used to work when I used a <canvas id="renderCanvas"></canvas> in the DOM.

When I change the CSS to ‘position: fixed’, the inspector becomes visible. I had to use an non-scoped style to get it working:

<style lang='scss'>
  #embed-host {
    position: fixed !important;
  }
</style>

But the inspector is then overlaying the canvas, instead of reducing the width of the canvas.

2

As I am totally CSS stupid :slight_smile: let me ask my friend @RaananW what he is thinking ?

1 Like
3

I changed some things and it’s better now.
There was a problem in a mobile browser that the canvas would be stretched out, so after creating the canvas, I added:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Then to be absolutely sure the size is right, I also added a game.resizeGame() method, which I call in onMounted.

The canvas is now always full width and height of the screen, so the inspector is overlaying it. I’m not really sure if the inspector is supposed to reduce the width of the canvas, or overlay the canvas?

4

Short answer is - it depends on the configuration you are passing to the inspector :slight_smile:

This is the interface for the inspector configuration - Babylon.js/packages/dev/core/src/Debug/debugLayer.ts at master · BabylonJS/Babylon.js (github.com). As you can see there are different modes and different configuration options to get the inspector to work as you want it to. The root element SHOULD be the canvas’ parent, but it might be an issue for the inspector to find the parent for some reason. I can’t really tell without seeing a reproduction.

1 Like
5

Thank you for your answer. The problem seemed to be caused by the way I created the canvas, and setting the width and height later. It’s solved now, and I understand the configuration options a bit better now.

2 Likes
6

No way dude!! :joy:

1 Like
7

I dislike them as much as I do not make effort with them :slight_smile:

1 Like