# Low resolution render issue

**URL:** <https://forum.babylonjs.com/t/low-resolution-render-issue/25255>\
**Category:** Questions\
**Created:** [November 13, 2021, 7:21pm UTC](https://forum.babylonjs.com/t/low-resolution-render-issue/25255 "2021-11-13T19:21:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![DanieleSuppo](https://avatars.discourse-cdn.com/v4/letter/d/7cd45c/32.png) [@DanieleSuppo](https://forum.babylonjs.com/u/DanieleSuppo)\
**Post date:** [November 13, 2021, 7:21pm UTC](https://forum.babylonjs.com/t/low-resolution-render-issue/25255/1 "2021-11-13T19:21:35Z")

</div>

Hello,  
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)

 ![Cattura](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/4/54cfe473bc65c29f54397b2dde4380723b718a95.jpeg)

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

 ![Cattura01](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/a/ca426202ba9e2394d79a862131a7a9a3ec0fd248.jpeg)

Here’s a maybe more evident comparison, with particles  
local:

 ![Cattura02](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/3/634b517678c803e02181a05fd428477af0296c3e.jpeg)  
deployed:  
 ![Cattura03](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/9/191afb5e86b94359c62c04e004e7e31d9d693f93.jpeg)

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

```auto
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(() => {
    scene.render();
});

```

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 14, 2021, 8:02pm UTC](https://forum.babylonjs.com/t/low-resolution-render-issue/25255/2 "2021-11-14T20:02:57Z")

</div>

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.