\
**Category:** Bugs\
**Created:** [February 7, 2017, 12:06pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948 "2017-02-07T12:06:24Z")\
**Posts on this page:** 11\
**Page:** 1
**Author:**  [@dapetcu21](https://forum.defold.com/u/dapetcu21)\
**Post date:** [February 7, 2017, 12:06pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/1 "2017-02-07T12:06:24Z")
Hi!
Calling `Module.toggleFullscreen()` in the HTML5 build correctly enters full screen on hidpi devices (Android Chrome), but doesn’t multiply `canvas.width` and `canvas.height` with `window.devicePixelRatio || 1`.
The change needs to be operated in `_glfwSwapBuffers()` and `onFullScreenEventChange()`.
---
**Author:**  [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 8, 2017, 6:49am UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/2 "2017-02-08T06:49:07Z")
Thank you for reporting this. I believe this is the same issue as this one right? [How to get better quality web render? - #9 by Flemming](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/9)
---
**Author:**  [@dapetcu21](https://forum.defold.com/u/dapetcu21)\
**Post date:** [February 8, 2017, 7:32am UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/3 "2017-02-08T07:32:48Z")
Not really. You can get good results in windowed mode if you do what that issue recommends (set the canvas size with css and the canvas’s backing size with Module.setCanvasSize), but specifically in full screen mode you don’t have good control and the engine needs to accomodate for that.
---
**Author:**  [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 8, 2017, 7:35am UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/4 "2017-02-08T07:35:15Z")
I’ve added your info to the same ticket as I believe they should be solved together. If @sven doesn’t agree with me we’ll split it into two issues and update this post.
---
**Author:**  [@def.ent.777](https://forum.defold.com/u/def.ent.777)\
**Post date:** [July 6, 2017, 3:13pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/5 "2017-07-06T15:13:37Z")
@dapetcu21 did you find a work around?
–\>The change needs to be operated in \_glfwSwapBuffers() and onFullScreenEventChange().
can you plse expand on this?
Thanks!
---
**Author:**  [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [July 6, 2017, 4:13pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/6 "2017-07-06T16:13:36Z")
My template for resizable HTML5 canvas for mobile and PC:
```lua
Hamster 0.2 beta
```
Because on mobile devices browser logical width == 320..480px we need write some trick.
And this trick is set canvas. **style**.width to 100% but canvas.width to window.innerWidth\*devicePixelRatio;
I set Canvas style.width in css (see header).
If you can’t set canvas style properly then mobile browser setup wrong size of page.
Also your defold render script should react to changing app resolution: render.get\_window\_width() and render.get\_window\_height()
Example with this html template: [http://dragosha.com/hamster/](http://dragosha.com/hamster/)
Another good solution is using maximize-canvas script: [GitHub - sergebat/maximize-canvas: Make canvas occupy entire browser window within provided resolution constraints · GitHub](https://github.com/sergebat/maximize-canvas) (for properly working this script required to creating canvas in code, not preset in html)
---
**Author:**  [@dapetcu21](https://forum.defold.com/u/dapetcu21)\
**Post date:** [July 6, 2017, 4:36pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/7 "2017-07-06T16:36:54Z")
Well, the workaround for me at the time was prettyfying the main JS file, patching the above two functions manually, then minifying it back together.
---
**Author:**  [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [August 19, 2019, 12:56pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/8 "2019-08-19T12:56:46Z")
Solved in [Defold 1.2.160 has been released](https://forum.defold.com/t/defold-1-2-160-has-been-released/60637)
---
**Author:**  [@bryanrieger](https://forum.defold.com/u/bryanrieger)\
**Post date:** [October 31, 2021, 3:19pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/9 "2021-10-31T15:19:37Z")
I’m running Defold 1.2.188 and I’m still getting blurry HTML5 exports (fonts, images, etc) on hi-dpi displays.
In looking at /builtins/manifests/web/engine\_template.html I noticed that there is no code dealing with window.devicePixelRatio (as @Dragosha) illustrates in his HTML5 template above.
I added the following at line 130:
var dpi=window.devicePixelRatio || 1
And added ‘\* dpi’ to lines 197 and 198:
game\_canvas.width = width \* dpi;
game\_canvas.height = height \* dpi;
The default template now renders to hi-dpi displays. 🙂
I also didn’t see any {{#DEFOLD pragma}} statement for hi-dpi displays, just in-case that was not being picked up from the game.project file.
---
**Author:**  [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [October 31, 2021, 5:44pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/10 "2021-10-31T17:44:07Z")
Defold applies DPI is in the engine code not in template: [defold/engine/glfw/js/library\_glfw.js at b240830f87dca44c5af242afa531cb7a50160908 · defold/defold · GitHub](https://github.com/defold/defold/blob/b240830f87dca44c5af242afa531cb7a50160908/engine/glfw/js/library_glfw.js#L672)
I’ve just tested it using 1.2.188 and it works just fine:
option is on
option is off
---
**Author:**  [@bryanrieger](https://forum.defold.com/u/bryanrieger)\
**Post date:** [October 31, 2021, 6:09pm UTC](https://forum.defold.com/t/html5-build-full-screen-pixelated-on-hidpi-displays-def-2396-solved/4948/11 "2021-10-31T18:09:56Z")
Never mind, I just realized that the Display \> High Dpi option had been unchecked. 🤦♀️