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

---
 misc/dist/html/full-size.html         | 20 +++++++++++++-------
 platform/javascript/os_javascript.cpp | 11 +++++++----
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index 193f2a6aad8..ac0b4815fe5 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -155,6 +155,9 @@ $GODOT_HEAD_INCLUDE
 
 			var initializing = true;
 			var statusMode = 'hidden';
+			var lastWidth = 0;
+			var lastHeight = 0;
+			var lastScale = 0;
 
 			var animationCallbacks = [];
 			function animate(time) {
@@ -164,13 +167,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;
-				canvas.style.width = width + "px";
-				canvas.style.height = height + "px";
+				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/os_javascript.cpp b/platform/javascript/os_javascript.cpp
index 6a144f45a59..fef5d0ba64a 100644
--- a/platform/javascript/os_javascript.cpp
+++ b/platform/javascript/os_javascript.cpp
@@ -101,7 +101,7 @@ bool OS_JavaScript::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(canvas_id.utf8().get_data(), canvas_width, canvas_height);
 		return true;
 	}
@@ -159,7 +159,11 @@ void OS_JavaScript::set_window_size(const Size2 p_size) {
 			emscripten_exit_soft_fullscreen();
 			window_maximized = false;
 		}
-		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), p_size.x, p_size.y);
+		double scale = EM_ASM_DOUBLE({
+			return window.devicePixelRatio || 1;
+		});
+		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), p_size.x * scale, p_size.y * scale);
+		emscripten_set_element_css_size(canvas_id.utf8().get_data(), p_size.x, p_size.y);
 	}
 }
 
@@ -1147,9 +1151,8 @@ bool OS_JavaScript::main_loop_iterate() {
 			strategy.canvasResizedCallback = NULL;
 			emscripten_enter_soft_fullscreen(canvas_id.utf8().get_data(), &strategy);
 		} else {
-			emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), windowed_size.width, windowed_size.height);
+			set_window_size(Size2(windowed_size.width, windowed_size.height));
 		}
-		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), windowed_size.width, windowed_size.height);
 		just_exited_fullscreen = false;
 	}