Pixelated scene problem with my solution

Questions
1

With a function as Javascript module returning the canvas, I had to append to the body from inside the imported script to avoid pixelated canvas.

Imported function returning canvas script:

export default function makeGame() {
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const engine = new BABYLON.Engine(canvas, true);
  const scene = new BABYLON.Scene(engine);
  // Rest of the code...
  return canvas;
}

Script importing the function:

import makeGame from "./makeGame.js";
const renderer = makeGame();

If I add the canvas on the importing script, it’s pixelated and half working.
Here is the result difference:

1
11579×768 10.5 KB

2
21577×767 11.9 KB

Posting this in hope this might help someone.

2

That’s pretty weird, do you have a more complete reproduction?

3

I can’t reproduce it in the playground.
In bref, the canvas need to be added to the body before doing the scene.
Pixelated happen when you make the function return the canvas then add it to the body.
~
Sorry for not actually posing a question.
Posing a problem and solution in case others have it.

4

In bref, the canvas need to be added to the body before doing the scene.

The canvas must exist before the engine is created, as it is a parameter that you pass to the engine.

But it should work whether it’s created by the code or an HTML canvas element in the page. Perhaps you have a CSS that applies in one case and not in the other, and which modifies the rendering?

5

No CSS was changing it.

Like you said more simply:
Canvas must exist before the engine is created.