# Jagged fonts in HTML5 (DEF-2396)(SOLVED)

**URL:** <https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993>\
**Category:** Questions\
**Created:** [May 13, 2019, 7:12am UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993 "2019-05-13T07:12:55Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [May 14, 2019, 7:49pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/4 "2019-05-14T19:49:34Z")

</div>

Thanks for the repo case (in PM).

This is **DEF-2396** issue:

> [@How to get better quality web render?](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/10):
>
> 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): [image] With some fixes to canvas size and css: [image] 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…

I fixed this bug in your repository by adding logic that takes into account devicePixelRatio (method resize\_game\_canvas):

```lua
	function resize_game_canvas() {
		var app_container = document.getElementById('app-container');
		var game_canvas = document.getElementById('canvas');

		var dpi = window.devicePixelRatio || 1;

		var width = {{display.width}};
		var height = {{display.height}};

		app_container.style.width = width+"px";
		app_container.style.height = height+"px";
		game_canvas.width = width*dpi;
		game_canvas.height = height*dpi;
	}

	function load_engine() {
		resize_game_canvas();
         ...

```

Also, this issue solved in FBInstant games template:

> <https://github.com/defold/extension-fbinstant/blob/0806844fdeaafce0b925d3901c7d7bd16b7d33bb/fbinstant/index.html#L120>

---

_[View the full topic](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993)._