From 806edcae5bf94dced436cd6d27cb94a3a8134e3b Mon Sep 17 00:00:00 2001
From: Fabio Alessandrelli <fabio.alessandrelli@gmail.com>
Date: Thu, 30 Jul 2020 17:10:16 +0200
Subject: Better HiDPI support in HTML5.

---
 misc/dist/html/full-size.html                     | 18 +++++++++++++-----
 platform/javascript/display_server_javascript.cpp |  8 ++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index be25ce4839..b293fc9711 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -156,6 +156,9 @@ $GODOT_HEAD_INCLUDE
 
 			var initializing = true;
 			var statusMode = 'hidden';
+			var lastWidth = 0;
+			var lastHeight = 0;
+			var lastScale = 0;
 
 			var animationCallbacks = [];
 			function animate(time) {
@@ -165,11 +168,16 @@ $GODOT_HEAD_INCLUDE
 			requestAnimationFrame(animate);
 
 			function adjustCanvasDimensions() {
-				var scale = window.devicePixelRatio || 1;
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				canvas.width = width * scale;
-				canvas.height = height * scale;
+				const scale = window.devicePixelRatio || 1;
+				if (lastWidth != window.innerWidth || lastHeight != window.innerHeight || lastScale != scale) {
+					lastScale = scale;
+					lastWidth = window.innerWidth;
+					lastHeight = window.innerHeight;
+					canvas.width = Math.floor(lastWidth * scale);
+					canvas.height = Math.floor(lastHeight * scale);
+					canvas.style.width = lastWidth + "px";
+					canvas.style.height = lastHeight + "px";
+				}
 			}
 			animationCallbacks.push(adjustCanvasDimensions);
 			adjustCanvasDimensions();
diff --git a/platform/javascript/display_server_javascript.cpp b/platform/javascript/display_server_javascript.cpp
index 3b89d50f28..8dc33bdf64 100644
--- a/platform/javascript/display_server_javascript.cpp
+++ b/platform/javascript/display_server_javascript.cpp
@@ -75,7 +75,7 @@ bool DisplayServerJavaScript::check_size_force_redraw() {
 	if (last_width != canvas_width || last_height != canvas_height) {
 		last_width = canvas_width;
 		last_height = canvas_height;
-		// Update the framebuffer size and for redraw.
+		// Update the framebuffer size for redraw.
 		emscripten_set_canvas_element_size(DisplayServerJavaScript::canvas_id, canvas_width, canvas_height);
 		return true;
 	}
@@ -1103,7 +1103,11 @@ Size2i DisplayServerJavaScript::window_get_min_size(WindowID p_window) const {
 void DisplayServerJavaScript::window_set_size(const Size2i p_size, WindowID p_window) {
 	last_width = p_size.x;
 	last_height = p_size.y;
-	emscripten_set_canvas_element_size(canvas_id, p_size.x, p_size.y);
+	double scale = EM_ASM_DOUBLE({
+		return window.devicePixelRatio || 1;
+	});
+	emscripten_set_canvas_element_size(canvas_id, p_size.x * scale, p_size.y * scale);
+	emscripten_set_element_css_size(canvas_id, p_size.x, p_size.y);
 }
 
 Size2i DisplayServerJavaScript::window_get_size(WindowID p_window) const {
-- 
cgit v1.2.3