# How to get better quality web render?

**URL:** <https://forum.defold.com/t/how-to-get-better-quality-web-render/3889>\
**Category:** Questions\
**Created:** [January 5, 2017, 8:49pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889 "2017-01-05T20:49:00Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [January 11, 2017, 6:21pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/10 "2017-01-11T18:21:20Z")

</div>

Hi @Flemming!

I did a bit of investigation tonight and found out we aren’t really taking care of high-dpi displays for WebGL. Are you by any chance on such device?

Here is a quick comparison on my iMac (Left: HTML5, Right: Native window):

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/a/a6cf2d85809dbd6b3cc1bb672ea9d2967a6f1056.png)

With some fixes to canvas size and css:

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/4/44a91b42b26399c549fe899f6140e27cf4ff7090.png)

Here is a quick explanation what I did to get the result in the last image;

- Get the pixel ratio through JS; `window.devicePixelRatio`
- Update the canvas width and height by multiplying the pixel ratio with the original width and height; `<canvas width="original width * pixel ratio" height="original height * pixel ratio" ...>`
- Set the CSS width and height for the canvas element to the original width and height; `#canvas { width: original-width px; height: original-height px; }`

I think we should add this to the default html-export on our side of course, but you should be able to modify the HTML output to get the same result.

---

_[View the full topic](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889)._