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().
Thank you for reporting this. I believe this is the same issue as this one right? How to get better quality web render?
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.
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.
@dapetcu21 did you find a work around?
–>The change needs to be operated in _glfwSwapBuffers() and onFullScreenEventChange().
can you plse expand on this?
Thanks!
My template for resizable HTML5 canvas for mobile and PC:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,width=device-width,minimal-ui" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hamster 0.2 beta</title>
<style>
.canvas-app-container {
/* A positioned parent for loading visuals */
width: 100%;
height: 100%;
position: absolute;
align-items: center;
justify-content: center;
overflow: hidden;
background: #0e1618;
}
.canvas-app-progress {
position: absolute;
background-color: rgb(245, 245, 245);
height: 20px;
/* Progress same width as canvas. */
width: 100%;
bottom: 0px;
}
.canvas-app-progress-bar {
font-size: 12px;
height: 20px;
color: rgb(255, 255, 255);
background-color: rgb(30, 100, 234);
text-align: center;
line-height: 20px;
}
* { margin:0; padding:0; }
#canvas {
outline: none;
border: 0;
width: 100%;
}
canvas:focus, canvas:active {
outline: none;
border: 0;
ie-dummy: expression(this.hideFocus=true);
-moz-outline-style: none;
}
div {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
</head>
<body oncontextmenu="return false;">
<div id="fb-root"></div>
<div id="app-container" class="canvas-app-container">
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="720" height="720"></canvas>
</div>
<!-- -->
<script type='text/javascript' src="dmloader.js"></script>
<script type='text/javascript' src="Hamster.js" async onload=""></script>
<!-- -->
<script type='text/javascript'>
var extra_params = {
archive_location_filter: function( path ) {
return ("archive" + path + "");
},
engine_arguments: ["--verify-graphics-calls=false"],
splash_image: "splash_image.png",
custom_heap_size: 268435456
}
Module.runApp("canvas", extra_params);
function resize_game_canvas() {
var dpi=window.devicePixelRatio || 1
//var dpi =1
var width=window.innerWidth;
var height=window.innerHeight;
var aspect=width/height
var app_container = document.getElementById('app-container');
app_container.style.width = width+"px";
app_container.style.height = height+"px";
var game_canvas = document.getElementById('canvas');
game_canvas.width = width*dpi;
game_canvas.height = height*dpi;
window.console.log("width: " + game_canvas.width + " > "+ game_canvas.style.width)
window.console.log("height:" + game_canvas.height + " > "+ game_canvas.style.height)
}
resize_game_canvas();
window.addEventListener('resize', resize_game_canvas, false);
window.addEventListener('orientationchange', resize_game_canvas, false);
</script>
</body>
</html>
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/
Another good solution is using maximize-canvas script: https://github.com/sergebat/maximize-canvas (for properly working this script required to creating canvas in code, not preset in html)
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.
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.
Defold applies DPI is in the engine code not in template: 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
Never mind, I just realized that the Display > High Dpi option had been unchecked. 
