Low resolution render issue

I’m using the npm version of Babylon 5, and locally everything is in low resolution.
This is a simple image that show what I see with my local webserver (the render is in low res)

But when I deploy the files to the web, the box look in normal resolution…

Here’s a maybe more evident comparison, with particles


I think I didn’t experienced such a problem with 4.2 version,
Is there a reason for that?
Many thanks!

this is my code

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { SpotLight } from "@babylonjs/core/Lights/spotLight";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { Color3 } from "@babylonjs/core/Maths/math.color";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Tools } from "@babylonjs/core/Misc/tools"

function createScene() {
    var scene = new Scene(engine);
    var camera = new ArcRotateCamera("Camera", 0.0, 1.3, 10, new Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, false);
    const box = MeshBuilder.CreateBox("box", { width: 1, depth: 1, height: 4 }, scene);
    const light = new SpotLight("SpotLight", new Vector3(-5, 5.16, -5.1), new Vector3(1, -1, 1), 1.2, 24, scene);
    return scene;

var canvas = document.getElementById("renderCanvas");
var engine = new Engine(canvas);
var scene = createScene();

engine.runRenderLoop(() => {

The most common issue is your CSS not setting the right width height on your canvas.

Or after the engine is created so you need to call engine.resize()

If you are using a high dpi screen babylon renders by default at css resolution so you might need to use setHardwareScalingLevel on engine to scale back to the intended res.