[JS] Check canvas size each loop, force redraw.

Remove ResizeObserver, fix compatibility issues, achieve smoother
resizing.

platform/javascript/javascript_main.cpp

@@ -59,6 +59,10 @@ void exit_callback() {
 
 void main_loop_callback() {
 
+	bool force_draw = os->check_size_force_redraw();
+	if (force_draw) {
+		Main::force_redraw();
+	}
 	if (os->main_loop_iterate()) {
 		emscripten_cancel_main_loop(); // Cancel current loop and wait for finalize_async.
 		EM_ASM({
@@ -106,7 +110,6 @@ extern "C" EMSCRIPTEN_KEEPALIVE void main_after_fs_sync(char *p_idbfs_err) {
 	EM_ASM({
 		stringToUTF8(Module['locale'], $0, 16);
 	}, locale_ptr);
-
 	/* clang-format on */
 	setenv("LANG", locale_ptr, true);
 

platform/javascript/os_javascript.cpp

@@ -94,17 +94,21 @@ static Point2 compute_position_in_canvas(int x, int y) {
 			(int)(canvas_height / element_height * (y - canvas_y)));
 }
 
-static bool cursor_inside_canvas = true;
+bool OS_JavaScript::check_size_force_redraw() {
-
-extern "C" EMSCRIPTEN_KEEPALIVE void _canvas_resize_callback() {
-	OS_JavaScript *os = OS_JavaScript::get_singleton();
 	int canvas_width;
 	int canvas_height;
-	// Update the framebuffer size.
+	emscripten_get_canvas_element_size(canvas_id.utf8().get_data(), &canvas_width, &canvas_height);
-	emscripten_get_canvas_element_size(os->canvas_id.utf8().get_data(), &canvas_width, &canvas_height);
+	if (last_width != canvas_width || last_height != canvas_height) {
-	emscripten_set_canvas_element_size(os->canvas_id.utf8().get_data(), canvas_width, canvas_height);
+		last_width = canvas_width;
-	Main::force_redraw();
+		last_height = canvas_height;
+		// Update the framebuffer size and for redraw.
+		emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), canvas_width, canvas_height);
+		return true;
 	}
+	return false;
+}
+
+static bool cursor_inside_canvas = true;
 
 EM_BOOL OS_JavaScript::fullscreen_change_callback(int p_event_type, const EmscriptenFullscreenChangeEvent *p_event, void *p_user_data) {
 
@@ -1062,12 +1066,6 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
 		Module.listeners['drop'] = Module.drop_handler; // Defined in native/utils.js
 		canvas.addEventListener('dragover', Module.listeners['dragover'], false);
 		canvas.addEventListener('drop', Module.listeners['drop'], false);
-		// Resize
-		const resize_callback = cwrap('_canvas_resize_callback', null, []);
-		Module.resize_observer = new window['ResizeObserver'](function(elements) {
-			resize_callback();
-		});
-		Module.resize_observer.observe(canvas);
 		// Quit request
 		Module['request_quit'] = function() {
 			send_notification(notifications[notifications.length - 1]);
@@ -1167,8 +1165,6 @@ void OS_JavaScript::finalize_async() {
 			}
 		});
 		Module.listeners = {};
-		Module.resize_observer.unobserve(canvas);
-		delete Module.resize_observer;
 	});
 	audio_driver_javascript.finish_async();
 }
@@ -1409,6 +1405,9 @@ OS_JavaScript::OS_JavaScript(int p_argc, char *p_argv[]) {
 	last_click_ms = 0;
 	last_click_pos = Point2(-100, -100);
 
+	last_width = 0;
+	last_height = 0;
+
 	window_maximized = false;
 	entering_fullscreen = false;
 	just_exited_fullscreen = false;

platform/javascript/os_javascript.h

@@ -61,6 +61,9 @@ class OS_JavaScript : public OS_Unix {
 	double last_click_ms;
 	int last_click_button_index;
 
+	int last_width;
+	int last_height;
+
 	MainLoop *main_loop;
 	int video_driver_index;
 	AudioDriverJavaScript audio_driver_javascript;
@@ -105,6 +108,7 @@ protected:
 public:
 	String canvas_id;
 	void finalize_async();
+	bool check_size_force_redraw();
 
 	// Override return type to make writing static callbacks less tedious.
 	static OS_JavaScript *get_singleton();