Merge pull request #46201 from Faless/js/3.x_canvas_size_pr

[3.2] [HTML5] Easier HTML templates, better canvas size handling.

misc/dist/html/editor.html

@@ -236,7 +236,7 @@
 	<script type='text/javascript' src='godot.tools.js'></script>
 	<script type='text/javascript'>//<![CDATA[
 
-		var engine = new Engine;
+		var editor = null;
 		var game = null;
 		var setStatusMode;
 		var setStatusNotice;
@@ -321,13 +321,12 @@
 
 		function closeEditor() {
 			closeGame();
-			if (engine) {
-				engine.requestQuit();
+			if (editor) {
+				editor.requestQuit();
 			}
 		}
 
 		function startEditor(zip) {
-
 			const INDETERMINATE_STATUS_STEP_MS = 100;
 			const persistentPaths = ['/home/web_user'];
 
@@ -337,6 +336,7 @@
 			var statusProgressInner = document.getElementById('status-progress-inner');
 			var statusIndeterminate = document.getElementById('status-indeterminate');
 			var statusNotice = document.getElementById('status-notice');
+			var headerDiv = document.getElementById('tabs-buttons');
 
 			var initializing = true;
 			var statusMode = 'hidden';
@@ -350,22 +350,28 @@
 			}
 			requestAnimationFrame(animate);
 
+			var lastScale = 0;
+			var lastWidth = 0;
+			var lastHeight = 0;
 			function adjustCanvasDimensions() {
 				var scale = window.devicePixelRatio || 1;
-				var header = document.getElementById('tabs-buttons');
-				var headerHeight = header.offsetHeight + 1;
+				var headerHeight = headerDiv.offsetHeight + 1;
 				var width = window.innerWidth;
 				var height = window.innerHeight - headerHeight;
-				editorCanvas.width = width * scale;
-				editorCanvas.height = height * scale;
-				editorCanvas.style.width = width + "px";
-				editorCanvas.style.height = height + "px";
+				if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
+					editorCanvas.width = width * scale;
+					editorCanvas.height = height * scale;
+					editorCanvas.style.width = width + "px";
+					editorCanvas.style.height = height + "px";
+					lastScale = scale;
+					lastWidth = width;
+					lastHeight = height;
+				}
 			}
 			animationCallbacks.push(adjustCanvasDimensions);
 			adjustCanvasDimensions();
 
 			setStatusMode = function setStatusMode(mode) {
-
 				if (statusMode === mode || !initializing)
 					return;
 				[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
@@ -394,7 +400,6 @@
 			};
 
 			function animateStatusIndeterminate(ms) {
-
 				var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
 				if (statusIndeterminate.children[i].style.borderTopColor == '') {
 					Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
@@ -405,7 +410,6 @@
 			}
 
 			setStatusNotice = function setStatusNotice(text) {
-
 				while (statusNotice.lastChild) {
 					statusNotice.removeChild(statusNotice.lastChild);
 				}
@@ -416,25 +420,23 @@
 				});
 			};
 
-			engine.setProgressFunc((current, total) => {
-
-				if (total > 0) {
-					statusProgressInner.style.width = current/total * 100 + '%';
-					setStatusMode('progress');
-					if (current === total) {
-						// wait for progress bar animation
-						setTimeout(() => {
-							setStatusMode('indeterminate');
-						}, 100);
-					}
-				} else {
-					setStatusMode('indeterminate');
-				}
-			});
-
-			engine.setPersistentPaths(persistentPaths);
+			const gameConfig = {
+				'persistentPaths': persistentPaths,
+				'unloadAfterInit': false,
+				'canvas': gameCanvas,
+				'canvasResizePolicy': 1,
+				'onExit': function () {
+					setGameTabEnabled(false);
+					showTab('editor');
+					game = null;
+				},
+			};
 
-			engine.setOnExecute(function(args) {
+			var OnEditorExit = function () {
+				showTab('loader');
+				setLoaderEnabled(true);
+			};
+			function Execute(args) {
 				const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
 				const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
 				const is_game = !is_editor && !is_project_manager;
@@ -447,42 +449,60 @@
 						return;
 					}
 					setGameTabEnabled(true);
-					game = new Engine();
-					game.setPersistentPaths(persistentPaths);
-					game.setUnloadAfterInit(false);
-					game.setOnExecute(engine.onExecute);
-					game.setCanvas(gameCanvas);
-					game.setCanvasResizedOnStart(true);
-					game.setOnExit(function() {
-						setGameTabEnabled(false);
-						showTab('editor');
-						game = null;
-					});
+					game = new Engine(gameConfig);
 					showTab('game');
 					game.init().then(function() {
 						requestAnimationFrame(function() {
-							game.start.apply(game, args).then(function() {
+							game.start({'args': args}).then(function() {
 								gameCanvas.focus();
 							});
 						});
 					});
 				} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
-					engine.setOnExit(function(code) {
+					OnEditorExit = function(code) {
 						setLoaderEnabled(true);
 						setTimeout(function() {
-							engine.init().then(function() {
+							editor.init().then(function() {
 								setLoaderEnabled(false);
-								engine.setOnExit(function() {
+								OnEditorExit = function() {
 									showTab('loader');
 									setLoaderEnabled(true);
-								});
-								engine.start.apply(engine, args);
+								};
+								editor.start({'args': args});
 							});
 						}, 0);
-						engine.setOnExit(null);
-					});
+						OnEditorExit = null;
+					};
 				}
-			});
+			}
+
+			const editorConfig = {
+				'unloadAfterInit': false,
+				'onProgress': function progressFunction (current, total) {
+					if (total > 0) {
+						statusProgressInner.style.width = current/total * 100 + '%';
+						setStatusMode('progress');
+						if (current === total) {
+							// wait for progress bar animation
+							setTimeout(() => {
+								setStatusMode('indeterminate');
+							}, 100);
+						}
+					} else {
+						setStatusMode('indeterminate');
+					}
+				},
+				'canvas': editorCanvas,
+				'canvasResizePolicy': 0,
+				'onExit': function() {
+					if (OnEditorExit) {
+						OnEditorExit();
+					}
+				},
+				'onExecute': Execute,
+				'persistentPaths': persistentPaths,
+			};
+			editor = new Engine(editorConfig);
 
 			function displayFailureNotice(err) {
 				var msg = err.message || err;
@@ -496,26 +516,20 @@
 				displayFailureNotice('WebGL not available');
 			} else {
 				setStatusMode('indeterminate');
-				engine.setCanvas(editorCanvas);
-				engine.setUnloadAfterInit(false); // Don't want to reload when starting game.
-				engine.init('godot.tools').then(function() {
+				editor.init('godot.tools').then(function() {
 					if (zip) {
-						engine.copyToFS("/tmp/preload.zip", zip);
+						editor.copyToFS("/tmp/preload.zip", zip);
 					}
 					try {
 						// Avoid user creating project in the persistent root folder.
-						engine.copyToFS("/home/web_user/keep", new Uint8Array());
+						editor.copyToFS("/home/web_user/keep", new Uint8Array());
 					} catch(e) {
 						// File exists
 					}
 					//selectVideoMode();
 					showTab('editor');
 					setLoaderEnabled(false);
-					engine.setOnExit(function() {
-						showTab('loader');
-						setLoaderEnabled(true);
-					});
-					engine.start('--video-driver', video_driver).then(function() {
+					editor.start({'args': ['--video-driver', video_driver]}).then(function() {
 						setStatusMode('hidden');
 						initializing = false;
 					});

misc/dist/html/full-size.html

@@ -134,21 +134,14 @@ $GODOT_HEAD_INCLUDE
 		<div id='status-notice' class='godot' style='display: none;'></div>
 	</div>
 
-	<script type='text/javascript' src='$GODOT_BASENAME.js'></script>
+	<script type='text/javascript' src='$GODOT_URL'></script>
 	<script type='text/javascript'>//<![CDATA[
 
-		var engine = new Engine;
-		var setStatusMode;
-		var setStatusNotice;
+		const GODOT_CONFIG = $GODOT_CONFIG;
+		var engine = new Engine(GODOT_CONFIG);
 
 		(function() {
-
-			const EXECUTABLE_NAME = '$GODOT_BASENAME';
-			const MAIN_PACK = '$GODOT_BASENAME.pck';
-			const GDNATIVE_LIBS = [$GODOT_GDNATIVE_LIBS];
 			const INDETERMINATE_STATUS_STEP_MS = 100;
-			const FULL_WINDOW = $GODOT_FULL_WINDOW;
-
 			var canvas = document.getElementById('canvas');
 			var statusProgress = document.getElementById('status-progress');
 			var statusProgressInner = document.getElementById('status-progress-inner');
@@ -168,26 +161,7 @@ $GODOT_HEAD_INCLUDE
 			}
 			requestAnimationFrame(animate);
 
-			function adjustCanvasDimensions() {
-				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";
-				}
-			}
-			if (FULL_WINDOW) {
-				animationCallbacks.push(adjustCanvasDimensions);
-				adjustCanvasDimensions();
-			} else {
-				engine.setCanvasResizedOnStart(true);
-			}
-
-			setStatusMode = function setStatusMode(mode) {
+			function setStatusMode(mode) {
 
 				if (statusMode === mode || !initializing)
 					return;
@@ -217,7 +191,6 @@ $GODOT_HEAD_INCLUDE
 			}
 
 			function animateStatusIndeterminate(ms) {
-
 				var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
 				if (statusIndeterminate.children[i].style.borderTopColor == '') {
 					Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
@@ -227,8 +200,7 @@ $GODOT_HEAD_INCLUDE
 				}
 			}
 
-			setStatusNotice = function setStatusNotice(text) {
-
+			function setStatusNotice(text) {
 				while (statusNotice.lastChild) {
 					statusNotice.removeChild(statusNotice.lastChild);
 				}
@@ -239,22 +211,6 @@ $GODOT_HEAD_INCLUDE
 				});
 			};
 
-			engine.setProgressFunc((current, total) => {
-
-				if (total > 0) {
-					statusProgressInner.style.width = current/total * 100 + '%';
-					setStatusMode('progress');
-					if (current === total) {
-						// wait for progress bar animation
-						setTimeout(() => {
-							setStatusMode('indeterminate');
-						}, 500);
-					}
-				} else {
-					setStatusMode('indeterminate');
-				}
-			});
-
 			function displayFailureNotice(err) {
 				var msg = err.message || err;
 				console.error(msg);
@@ -267,9 +223,22 @@ $GODOT_HEAD_INCLUDE
 				displayFailureNotice('WebGL not available');
 			} else {
 				setStatusMode('indeterminate');
-				engine.setCanvas(canvas);
-				engine.setGDNativeLibraries(GDNATIVE_LIBS);
-				engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
+				engine.startGame({
+					'onProgress': function (current, total) {
+						if (total > 0) {
+							statusProgressInner.style.width = current/total * 100 + '%';
+							setStatusMode('progress');
+							if (current === total) {
+								// wait for progress bar animation
+								setTimeout(() => {
+									setStatusMode('indeterminate');
+								}, 500);
+							}
+						} else {
+							setStatusMode('indeterminate');
+						}
+					},
+				}).then(() => {
 					setStatusMode('hidden');
 					initializing = false;
 				}, displayFailureNotice);

platform/javascript/.eslintrc.engine.js

@@ -3,6 +3,7 @@ module.exports = {
 		"./.eslintrc.js",
 	],
 	"globals": {
+		"EngineConfig": true,
 		"Godot": true,
 		"Preloader": true,
 		"Utils": true,

platform/javascript/SCsub

@@ -73,6 +73,7 @@ sys_env.Depends(build[0], sys_env["JS_EXTERNS"])
 engine = [
     "js/engine/preloader.js",
     "js/engine/utils.js",
+    "js/engine/config.js",
     "js/engine/engine.js",
 ]
 externs = [env.File("#platform/javascript/js/engine/engine.externs.js")]

platform/javascript/export/export.cpp

@@ -28,6 +28,7 @@
 /* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                */
 /*************************************************************************/
 
+#include "core/io/json.h"
 #include "core/io/tcp_server.h"
 #include "core/io/zip_io.h"
 #include "editor/editor_export.h"
@@ -241,7 +242,7 @@ class EditorExportPlatformJavaScript : public EditorExportPlatform {
 		return name;
 	}
 
-	void _fix_html(Vector<uint8_t> &p_html, const Ref<EditorExportPreset> &p_preset, const String &p_name, bool p_debug, const Vector<SharedObject> p_shared_objects);
+	void _fix_html(Vector<uint8_t> &p_html, const Ref<EditorExportPreset> &p_preset, const String &p_name, bool p_debug, int p_flags, const Vector<SharedObject> p_shared_objects);
 
 	static void _server_thread_poll(void *data);
 
@@ -279,25 +280,35 @@ public:
 	~EditorExportPlatformJavaScript();
 };
 
-void EditorExportPlatformJavaScript::_fix_html(Vector<uint8_t> &p_html, const Ref<EditorExportPreset> &p_preset, const String &p_name, bool p_debug, const Vector<SharedObject> p_shared_objects) {
+void EditorExportPlatformJavaScript::_fix_html(Vector<uint8_t> &p_html, const Ref<EditorExportPreset> &p_preset, const String &p_name, bool p_debug, int p_flags, const Vector<SharedObject> p_shared_objects) {
 
 	String str_template = String::utf8(reinterpret_cast<const char *>(p_html.ptr()), p_html.size());
 	String str_export;
 	Vector<String> lines = str_template.split("\n");
-	String libs;
+	Array libs;
 	for (int i = 0; i < p_shared_objects.size(); i++) {
-		libs += "\"" + p_shared_objects[i].path.get_file() + "\",";
+		libs.push_back(p_shared_objects[i].path.get_file());
 	}
+	Vector<String> flags;
+	gen_export_flags(flags, p_flags & (~DEBUG_FLAG_REMOTE_DEBUG) & (~DEBUG_FLAG_DUMB_CLIENT));
+	Array args;
+	for (int i = 0; i < flags.size(); i++) {
+		args.push_back(flags[i]);
+	}
+	Dictionary config;
+	config["canvasResizePolicy"] = p_preset->get("html/canvas_resize_policy");
+	config["gdnativeLibs"] = libs;
+	config["executable"] = p_name;
+	config["args"] = args;
+	const String str_config = JSON::print(config);
 
 	for (int i = 0; i < lines.size(); i++) {
 
 		String current_line = lines[i];
-		current_line = current_line.replace("$GODOT_BASENAME", p_name);
+		current_line = current_line.replace("$GODOT_URL", p_name + ".js");
 		current_line = current_line.replace("$GODOT_PROJECT_NAME", ProjectSettings::get_singleton()->get_setting("application/config/name"));
 		current_line = current_line.replace("$GODOT_HEAD_INCLUDE", p_preset->get("html/head_include"));
-		current_line = current_line.replace("$GODOT_FULL_WINDOW", p_preset->get("html/full_window_size") ? "true" : "false");
-		current_line = current_line.replace("$GODOT_GDNATIVE_LIBS", libs);
-		current_line = current_line.replace("$GODOT_DEBUG_ENABLED", p_debug ? "true" : "false");
+		current_line = current_line.replace("$GODOT_CONFIG", str_config);
 		str_export += current_line + "\n";
 	}
 
@@ -342,7 +353,7 @@ void EditorExportPlatformJavaScript::get_export_options(List<ExportOption> *r_op
 	r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "vram_texture_compression/for_mobile"), false)); // ETC or ETC2, depending on renderer
 	r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "html/custom_html_shell", PROPERTY_HINT_FILE, "*.html"), ""));
 	r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "html/head_include", PROPERTY_HINT_MULTILINE_TEXT), ""));
-	r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "html/full_window_size"), true));
+	r_options->push_back(ExportOption(PropertyInfo(Variant::INT, "html/canvas_resize_policy", PROPERTY_HINT_ENUM, "None,Project,Adaptive"), 2));
 }
 
 String EditorExportPlatformJavaScript::get_name() const {
@@ -493,7 +504,7 @@ Error EditorExportPlatformJavaScript::export_project(const Ref<EditorExportPrese
 			if (!custom_html.empty()) {
 				continue;
 			}
-			_fix_html(data, p_preset, p_path.get_file().get_basename(), p_debug, shared_objects);
+			_fix_html(data, p_preset, p_path.get_file().get_basename(), p_debug, p_flags, shared_objects);
 			file = p_path.get_file();
 
 		} else if (file == "godot.js") {
@@ -540,7 +551,7 @@ Error EditorExportPlatformJavaScript::export_project(const Ref<EditorExportPrese
 		buf.resize(f->get_len());
 		f->get_buffer(buf.ptrw(), buf.size());
 		memdelete(f);
-		_fix_html(buf, p_preset, p_path.get_file().get_basename(), p_debug, shared_objects);
+		_fix_html(buf, p_preset, p_path.get_file().get_basename(), p_debug, p_flags, shared_objects);
 
 		f = FileAccess::open(p_path, FileAccess::WRITE);
 		if (!f) {

platform/javascript/godot_js.h

@@ -40,7 +40,6 @@ extern "C" {
 // Config
 extern void godot_js_config_locale_get(char *p_ptr, int p_ptr_max);
 extern void godot_js_config_canvas_id_get(char *p_ptr, int p_ptr_max);
-extern int godot_js_config_is_resize_on_start();
 
 // OS
 extern void godot_js_os_finish_async(void (*p_callback)());
@@ -61,10 +60,15 @@ extern int godot_js_display_is_swap_ok_cancel();
 // Display canvas
 extern void godot_js_display_canvas_focus();
 extern int godot_js_display_canvas_is_focused();
-extern void godot_js_display_canvas_bounding_rect_position_get(int32_t *p_x, int32_t *p_y);
 
 // Display window
-extern void godot_js_display_window_request_fullscreen();
+extern void godot_js_display_desired_size_set(int p_width, int p_height);
+extern int godot_js_display_size_update();
+extern void godot_js_display_window_size_get(int32_t *p_x, int32_t *p_y);
+extern void godot_js_display_screen_size_get(int32_t *p_x, int32_t *p_y);
+extern int godot_js_display_fullscreen_request();
+extern int godot_js_display_fullscreen_exit();
+extern void godot_js_display_compute_position(int p_x, int p_y, int32_t *r_x, int32_t *r_y);
 extern void godot_js_display_window_title_set(const char *p_text);
 extern void godot_js_display_window_icon_set(const uint8_t *p_ptr, int p_len);
 
@@ -88,7 +92,7 @@ extern int godot_js_display_gamepad_sample_get(int p_idx, float r_btns[16], int3
 extern void godot_js_display_notification_cb(void (*p_callback)(int p_notification), int p_enter, int p_exit, int p_in, int p_out);
 extern void godot_js_display_paste_cb(void (*p_callback)(const char *p_text));
 extern void godot_js_display_drop_files_cb(void (*p_callback)(char **p_filev, int p_filec));
-extern void godot_js_display_setup_canvas();
+extern void godot_js_display_setup_canvas(int p_width, int p_height, int p_fullscreen);
 #ifdef __cplusplus
 }
 #endif

platform/javascript/js/engine/config.js

@@ -0,0 +1,100 @@
+/** @constructor */
+function EngineConfig(opts) {
+	// Module config
+	this.unloadAfterInit = true;
+	this.onPrintError = function () {
+		console.error.apply(console, Array.from(arguments)); // eslint-disable-line no-console
+	};
+	this.onPrint = function () {
+		console.log.apply(console, Array.from(arguments)); // eslint-disable-line no-console
+	};
+	this.onProgress = null;
+
+	// Godot Config
+	this.canvas = null;
+	this.executable = '';
+	this.mainPack = null;
+	this.locale = null;
+	this.canvasResizePolicy = false;
+	this.persistentPaths = ['/userfs'];
+	this.gdnativeLibs = [];
+	this.args = [];
+	this.onExecute = null;
+	this.onExit = null;
+	this.update(opts);
+}
+
+EngineConfig.prototype.update = function (opts) {
+	const config = opts || {};
+	function parse(key, def) {
+		if (typeof (config[key]) === 'undefined') {
+			return def;
+		}
+		return config[key];
+	}
+	// Module config
+	this.unloadAfterInit = parse('unloadAfterInit', this.unloadAfterInit);
+	this.onPrintError = parse('onPrintError', this.onPrintError);
+	this.onPrint = parse('onPrint', this.onPrint);
+	this.onProgress = parse('onProgress', this.onProgress);
+
+	// Godot config
+	this.canvas = parse('canvas', this.canvas);
+	this.executable = parse('executable', this.executable);
+	this.mainPack = parse('mainPack', this.mainPack);
+	this.locale = parse('locale', this.locale);
+	this.canvasResizePolicy = parse('canvasResizePolicy', this.canvasResizePolicy);
+	this.persistentPaths = parse('persistentPaths', this.persistentPaths);
+	this.gdnativeLibs = parse('gdnativeLibs', this.gdnativeLibs);
+	this.args = parse('args', this.args);
+	this.onExecute = parse('onExecute', this.onExecute);
+	this.onExit = parse('onExit', this.onExit);
+};
+
+EngineConfig.prototype.getModuleConfig = function (loadPath, loadPromise) {
+	const me = this;
+	return {
+		'print': this.onPrint,
+		'printErr': this.onPrintError,
+		'locateFile': Utils.createLocateRewrite(loadPath),
+		'instantiateWasm': Utils.createInstantiatePromise(loadPromise),
+		'thisProgram': me.executable,
+		'noExitRuntime': true,
+		'dynamicLibraries': [`${me.executable}.side.wasm`],
+	};
+};
+
+EngineConfig.prototype.getGodotConfig = function (cleanup) {
+	if (!(this.canvas instanceof HTMLCanvasElement)) {
+		this.canvas = Utils.findCanvas();
+		if (!this.canvas) {
+			throw new Error('No canvas found in page');
+		}
+	}
+
+	// Canvas can grab focus on click, or key events won't work.
+	if (this.canvas.tabIndex < 0) {
+		this.canvas.tabIndex = 0;
+	}
+
+	// Browser locale, or custom one if defined.
+	let locale = this.locale;
+	if (!locale) {
+		locale = navigator.languages ? navigator.languages[0] : navigator.language;
+		locale = locale.split('.')[0];
+	}
+	const onExit = this.onExit;
+	// Godot configuration.
+	return {
+		'canvas': this.canvas,
+		'canvasResizePolicy': this.canvasResizePolicy,
+		'locale': locale,
+		'onExecute': this.onExecute,
+		'onExit': function (p_code) {
+			cleanup(); // We always need to call the cleanup callback to free memory.
+			if (typeof (onExit) === 'function') {
+				onExit(p_code);
+			}
+		},
+	};
+};

platform/javascript/js/engine/engine.js

@@ -1,20 +1,14 @@
 const Engine = (function () {
 	const preloader = new Preloader();
 
-	let wasmExt = '.wasm';
-	let unloadAfterInit = true;
-	let loadPath = '';
 	let loadPromise = null;
+	let loadPath = '';
 	let initPromise = null;
-	let stderr = null;
-	let stdout = null;
-	let progressFunc = null;
 
 	function load(basePath) {
 		if (loadPromise == null) {
 			loadPath = basePath;
-			loadPromise = preloader.loadPromise(basePath + wasmExt);
-			preloader.setProgressFunc(progressFunc);
+			loadPromise = preloader.loadPromise(`${loadPath}.wasm`);
 			requestAnimationFrame(preloader.animateProgress);
 		}
 		return loadPromise;
@@ -25,16 +19,9 @@ const Engine = (function () {
 	}
 
 	/** @constructor */
-	function Engine() { // eslint-disable-line no-shadow
-		this.canvas = null;
-		this.executableName = '';
+	function Engine(opts) { // eslint-disable-line no-shadow
+		this.config = new EngineConfig(opts);
 		this.rtenv = null;
-		this.customLocale = null;
-		this.resizeCanvasOnStart = false;
-		this.onExecute = null;
-		this.onExit = null;
-		this.persistentPaths = ['/userfs'];
-		this.gdnativeLibs = [];
 	}
 
 	Engine.prototype.init = /** @param {string=} basePath */ function (basePath) {
@@ -48,25 +35,14 @@ const Engine = (function () {
 			}
 			load(basePath);
 		}
-		let config = {};
-		if (typeof stdout === 'function') {
-			config.print = stdout;
-		}
-		if (typeof stderr === 'function') {
-			config.printErr = stderr;
-		}
+		preloader.setProgressFunc(this.config.onProgress);
+		let config = this.config.getModuleConfig(loadPath, loadPromise);
 		const me = this;
 		initPromise = new Promise(function (resolve, reject) {
-			config['locateFile'] = Utils.createLocateRewrite(loadPath);
-			config['instantiateWasm'] = Utils.createInstantiatePromise(loadPromise);
-			// Emscripten configuration.
-			config['thisProgram'] = me.executableName;
-			config['noExitRuntime'] = true;
-			config['dynamicLibraries'] = [`${me.executableName}.side.wasm`].concat(me.gdnativeLibs);
 			Godot(config).then(function (module) {
-				module['initFS'](me.persistentPaths).then(function (fs_err) {
+				module['initFS'](me.config.persistentPaths).then(function (fs_err) {
 					me.rtenv = module;
-					if (unloadAfterInit) {
+					if (me.config.unloadAfterInit) {
 						unload();
 					}
 					resolve();
@@ -83,152 +59,60 @@ const Engine = (function () {
 	};
 
 	/** @type {function(...string):Object} */
-	Engine.prototype.start = function () {
-		// Start from arguments.
-		const args = [];
-		for (let i = 0; i < arguments.length; i++) {
-			args.push(arguments[i]);
-		}
+	Engine.prototype.start = function (override) {
+		this.config.update(override);
 		const me = this;
 		return me.init().then(function () {
 			if (!me.rtenv) {
 				return Promise.reject(new Error('The engine must be initialized before it can be started'));
 			}
 
-			if (!(me.canvas instanceof HTMLCanvasElement)) {
-				me.canvas = Utils.findCanvas();
-				if (!me.canvas) {
-					return Promise.reject(new Error('No canvas found in page'));
-				}
-			}
-
-			// Canvas can grab focus on click, or key events won't work.
-			if (me.canvas.tabIndex < 0) {
-				me.canvas.tabIndex = 0;
-			}
-
-			// Browser locale, or custom one if defined.
-			let locale = me.customLocale;
-			if (!locale) {
-				locale = navigator.languages ? navigator.languages[0] : navigator.language;
-				locale = locale.split('.')[0];
+			let config = {};
+			try {
+				config = me.config.getGodotConfig(function () {
+					me.rtenv = null;
+				});
+			} catch (e) {
+				return Promise.reject(e);
 			}
 			// Godot configuration.
-			me.rtenv['initConfig']({
-				'resizeCanvasOnStart': me.resizeCanvasOnStart,
-				'canvas': me.canvas,
-				'locale': locale,
-				'onExecute': function (p_args) {
-					if (me.onExecute) {
-						me.onExecute(p_args);
-						return 0;
-					}
-					return 1;
-				},
-				'onExit': function (p_code) {
-					me.rtenv['deinitFS']();
-					if (me.onExit) {
-						me.onExit(p_code);
-					}
-					me.rtenv = null;
-				},
-			});
+			me.rtenv['initConfig'](config);
 
-			return new Promise(function (resolve, reject) {
-				preloader.preloadedFiles.forEach(function (file) {
-					me.rtenv['copyToFS'](file.path, file.buffer);
+			// Preload GDNative libraries.
+			const libs = [];
+			me.config.gdnativeLibs.forEach(function (lib) {
+				libs.push(me.rtenv['loadDynamicLibrary'](lib, { 'loadAsync': true }));
+			});
+			return Promise.all(libs).then(function () {
+				return new Promise(function (resolve, reject) {
+					preloader.preloadedFiles.forEach(function (file) {
+						me.rtenv['copyToFS'](file.path, file.buffer);
+					});
+					preloader.preloadedFiles.length = 0; // Clear memory
+					me.rtenv['callMain'](me.config.args);
+					initPromise = null;
+					resolve();
 				});
-				preloader.preloadedFiles.length = 0; // Clear memory
-				me.rtenv['callMain'](args);
-				initPromise = null;
-				resolve();
 			});
 		});
 	};
 
-	Engine.prototype.startGame = function (execName, mainPack, extraArgs) {
+	Engine.prototype.startGame = function (override) {
+		this.config.update(override);
+		// Add main-pack argument.
+		const exe = this.config.executable;
+		const pack = this.config.mainPack || `${exe}.pck`;
+		this.config.args = ['--main-pack', pack].concat(this.config.args);
 		// Start and init with execName as loadPath if not inited.
-		this.executableName = execName;
 		const me = this;
 		return Promise.all([
-			this.init(execName),
-			this.preloadFile(mainPack, mainPack),
+			this.init(exe),
+			this.preloadFile(pack, pack),
 		]).then(function () {
-			let args = ['--main-pack', mainPack];
-			if (extraArgs) {
-				args = args.concat(extraArgs);
-			}
-			return me.start.apply(me, args);
+			return me.start.apply(me);
 		});
 	};
 
-	Engine.prototype.setWebAssemblyFilenameExtension = function (override) {
-		if (String(override).length === 0) {
-			throw new Error('Invalid WebAssembly filename extension override');
-		}
-		wasmExt = String(override);
-	};
-
-	Engine.prototype.setUnloadAfterInit = function (enabled) {
-		unloadAfterInit = enabled;
-	};
-
-	Engine.prototype.setCanvas = function (canvasElem) {
-		this.canvas = canvasElem;
-	};
-
-	Engine.prototype.setCanvasResizedOnStart = function (enabled) {
-		this.resizeCanvasOnStart = enabled;
-	};
-
-	Engine.prototype.setLocale = function (locale) {
-		this.customLocale = locale;
-	};
-
-	Engine.prototype.setExecutableName = function (newName) {
-		this.executableName = newName;
-	};
-
-	Engine.prototype.setProgressFunc = function (func) {
-		progressFunc = func;
-	};
-
-	Engine.prototype.setStdoutFunc = function (func) {
-		const print = function (text) {
-			let msg = text;
-			if (arguments.length > 1) {
-				msg = Array.prototype.slice.call(arguments).join(' ');
-			}
-			func(msg);
-		};
-		if (this.rtenv) {
-			this.rtenv.print = print;
-		}
-		stdout = print;
-	};
-
-	Engine.prototype.setStderrFunc = function (func) {
-		const printErr = function (text) {
-			let msg = text;
-			if (arguments.length > 1) {
-				msg = Array.prototype.slice.call(arguments).join(' ');
-			}
-			func(msg);
-		};
-		if (this.rtenv) {
-			this.rtenv.printErr = printErr;
-		}
-		stderr = printErr;
-	};
-
-	Engine.prototype.setOnExecute = function (onExecute) {
-		this.onExecute = onExecute;
-	};
-
-	Engine.prototype.setOnExit = function (onExit) {
-		this.onExit = onExit;
-	};
-
 	Engine.prototype.copyToFS = function (path, buffer) {
 		if (this.rtenv == null) {
 			throw new Error('Engine must be inited before copying files');
@@ -236,14 +120,6 @@ const Engine = (function () {
 		this.rtenv['copyToFS'](path, buffer);
 	};
 
-	Engine.prototype.setPersistentPaths = function (persistentPaths) {
-		this.persistentPaths = persistentPaths;
-	};
-
-	Engine.prototype.setGDNativeLibraries = function (gdnativeLibs) {
-		this.gdnativeLibs = gdnativeLibs;
-	};
-
 	Engine.prototype.requestQuit = function () {
 		if (this.rtenv) {
 			this.rtenv['request_quit']();
@@ -259,20 +135,7 @@ const Engine = (function () {
 	Engine.prototype['preloadFile'] = Engine.prototype.preloadFile;
 	Engine.prototype['start'] = Engine.prototype.start;
 	Engine.prototype['startGame'] = Engine.prototype.startGame;
-	Engine.prototype['setWebAssemblyFilenameExtension'] = Engine.prototype.setWebAssemblyFilenameExtension;
-	Engine.prototype['setUnloadAfterInit'] = Engine.prototype.setUnloadAfterInit;
-	Engine.prototype['setCanvas'] = Engine.prototype.setCanvas;
-	Engine.prototype['setCanvasResizedOnStart'] = Engine.prototype.setCanvasResizedOnStart;
-	Engine.prototype['setLocale'] = Engine.prototype.setLocale;
-	Engine.prototype['setExecutableName'] = Engine.prototype.setExecutableName;
-	Engine.prototype['setProgressFunc'] = Engine.prototype.setProgressFunc;
-	Engine.prototype['setStdoutFunc'] = Engine.prototype.setStdoutFunc;
-	Engine.prototype['setStderrFunc'] = Engine.prototype.setStderrFunc;
-	Engine.prototype['setOnExecute'] = Engine.prototype.setOnExecute;
-	Engine.prototype['setOnExit'] = Engine.prototype.setOnExit;
 	Engine.prototype['copyToFS'] = Engine.prototype.copyToFS;
-	Engine.prototype['setPersistentPaths'] = Engine.prototype.setPersistentPaths;
-	Engine.prototype['setGDNativeLibraries'] = Engine.prototype.setGDNativeLibraries;
 	Engine.prototype['requestQuit'] = Engine.prototype.requestQuit;
 	return Engine;
 }());

platform/javascript/js/libs/library_godot_display.js

@@ -396,13 +396,118 @@ const GodotDisplayGamepads = {
 };
 mergeInto(LibraryManager.library, GodotDisplayGamepads);
 
+const GodotDisplayScreen = {
+	$GodotDisplayScreen__deps: ['$GodotConfig', '$GodotOS', '$GL', 'emscripten_webgl_get_current_context'],
+	$GodotDisplayScreen: {
+		desired_size: [0, 0],
+		isFullscreen: function () {
+			const elem = document.fullscreenElement || document.mozFullscreenElement
+				|| document.webkitFullscreenElement || document.msFullscreenElement;
+			if (elem) {
+				return elem === GodotConfig.canvas;
+			}
+			// But maybe knowing the element is not supported.
+			return document.fullscreen || document.mozFullScreen
+				|| document.webkitIsFullscreen;
+		},
+		hasFullscreen: function () {
+			return document.fullscreenEnabled || document.mozFullScreenEnabled
+				|| document.webkitFullscreenEnabled;
+		},
+		requestFullscreen: function () {
+			if (!GodotDisplayScreen.hasFullscreen()) {
+				return 1;
+			}
+			const canvas = GodotConfig.canvas;
+			try {
+				const promise = (canvas.requestFullscreen || canvas.msRequestFullscreen
+					|| canvas.mozRequestFullScreen || canvas.mozRequestFullscreen
+					|| canvas.webkitRequestFullscreen
+				).call(canvas);
+				// Some browsers (Safari) return undefined.
+				// For the standard ones, we need to catch it.
+				if (promise) {
+					promise.catch(function () {
+						// nothing to do.
+					});
+				}
+			} catch (e) {
+				return 1;
+			}
+			return 0;
+		},
+		exitFullscreen: function () {
+			if (!GodotDisplayScreen.isFullscreen()) {
+				return 0;
+			}
+			try {
+				const promise = document.exitFullscreen();
+				if (promise) {
+					promise.catch(function () {
+						// nothing to do.
+					});
+				}
+			} catch (e) {
+				return 1;
+			}
+			return 0;
+		},
+		_updateGL: function () {
+			const gl_context_handle = _emscripten_webgl_get_current_context(); // eslint-disable-line no-undef
+			const gl = GL.getContext(gl_context_handle);
+			if (gl) {
+				GL.resizeOffscreenFramebuffer(gl);
+			}
+		},
+		updateSize: function () {
+			const isFullscreen = GodotDisplayScreen.isFullscreen();
+			const wantsFullWindow = GodotConfig.canvas_resize_policy === 2;
+			const noResize = GodotConfig.canvas_resize_policy === 0;
+			const wwidth = GodotDisplayScreen.desired_size[0];
+			const wheight = GodotDisplayScreen.desired_size[1];
+			const canvas = GodotConfig.canvas;
+			let width = wwidth;
+			let height = wheight;
+			if (noResize) {
+				// Don't resize canvas, just update GL if needed.
+				if (canvas.width !== width || canvas.height !== height) {
+					GodotDisplayScreen.desired_size = [canvas.width, canvas.height];
+					GodotDisplayScreen._updateGL();
+					return 1;
+				}
+				return 0;
+			}
+			const scale = window.devicePixelRatio || 1;
+			if (isFullscreen || wantsFullWindow) {
+				// We need to match screen size.
+				width = window.innerWidth * scale;
+				height = window.innerHeight * scale;
+			}
+			const csw = `${width / scale}px`;
+			const csh = `${height / scale}px`;
+			if (canvas.style.width !== csw || canvas.style.height !== csh || canvas.width !== width || canvas.height !== height) {
+				// Size doesn't match.
+				// Resize canvas, set correct CSS pixel size, update GL.
+				canvas.width = width;
+				canvas.height = height;
+				canvas.style.width = csw;
+				canvas.style.height = csh;
+				GodotDisplayScreen._updateGL();
+				return 1;
+			}
+			return 0;
+		},
+	},
+};
+mergeInto(LibraryManager.library, GodotDisplayScreen);
+
 /**
  * Display server interface.
  *
  * Exposes all the functions needed by DisplayServer implementation.
  */
 const GodotDisplay = {
-	$GodotDisplay__deps: ['$GodotConfig', '$GodotRuntime', '$GodotDisplayCursor', '$GodotDisplayListeners', '$GodotDisplayDragDrop', '$GodotDisplayGamepads'],
+	$GodotDisplay__deps: ['$GodotConfig', '$GodotRuntime', '$GodotDisplayCursor', '$GodotDisplayListeners', '$GodotDisplayDragDrop', '$GodotDisplayGamepads', '$GodotDisplayScreen'],
 	$GodotDisplay: {
 		window_icon: '',
 		findDPI: function () {
@@ -453,6 +558,48 @@ const GodotDisplay = {
 		return window.devicePixelRatio || 1;
 	},
 
+	godot_js_display_fullscreen_request__sig: 'i',
+	godot_js_display_fullscreen_request: function () {
+		return GodotDisplayScreen.requestFullscreen();
+	},
+
+	godot_js_display_fullscreen_exit__sig: 'i',
+	godot_js_display_fullscreen_exit: function () {
+		return GodotDisplayScreen.exitFullscreen();
+	},
+
+	godot_js_display_desired_size_set__sig: 'v',
+	godot_js_display_desired_size_set: function (width, height) {
+		GodotDisplayScreen.desired_size = [width, height];
+		GodotDisplayScreen.updateSize();
+	},
+
+	godot_js_display_size_update__sig: 'i',
+	godot_js_display_size_update: function () {
+		return GodotDisplayScreen.updateSize();
+	},
+
+	godot_js_display_screen_size_get__sig: 'vii',
+	godot_js_display_screen_size_get: function (width, height) {
+		const scale = window.devicePixelRatio || 1;
+		GodotRuntime.setHeapValue(width, window.screen.width * scale, 'i32');
+		GodotRuntime.setHeapValue(height, window.screen.height * scale, 'i32');
+	},
+
+	godot_js_display_window_size_get: function (p_width, p_height) {
+		GodotRuntime.setHeapValue(p_width, GodotConfig.canvas.width, 'i32');
+		GodotRuntime.setHeapValue(p_height, GodotConfig.canvas.height, 'i32');
+	},
+
+	godot_js_display_compute_position: function (x, y, r_x, r_y) {
+		const canvas = GodotConfig.canvas;
+		const rect = canvas.getBoundingClientRect();
+		const rw = canvas.width / rect.width;
+		const rh = canvas.height / rect.height;
+		GodotRuntime.setHeapValue(r_x, (x - rect.x) * rw, 'i32');
+		GodotRuntime.setHeapValue(r_y, (y - rect.y) * rh, 'i32');
+	},
+
 	/*
 	 * Canvas
 	 */
@@ -466,13 +613,6 @@ const GodotDisplay = {
 		return document.activeElement === GodotConfig.canvas;
 	},
 
-	godot_js_display_canvas_bounding_rect_position_get__sig: 'vii',
-	godot_js_display_canvas_bounding_rect_position_get: function (r_x, r_y) {
-		const brect = GodotConfig.canvas.getBoundingClientRect();
-		GodotRuntime.setHeapValue(r_x, brect.x, 'i32');
-		GodotRuntime.setHeapValue(r_y, brect.y, 'i32');
-	},
-
 	/*
 	 * Touchscreen
 	 */
@@ -516,15 +656,6 @@ const GodotDisplay = {
 	/*
 	 * Window
 	 */
-	godot_js_display_window_request_fullscreen__sig: 'v',
-	godot_js_display_window_request_fullscreen: function () {
-		const canvas = GodotConfig.canvas;
-		(canvas.requestFullscreen || canvas.msRequestFullscreen
-			|| canvas.mozRequestFullScreen || canvas.mozRequestFullscreen
-			|| canvas.webkitRequestFullscreen
-		).call(canvas);
-	},
-
 	godot_js_display_window_title_set__sig: 'vi',
 	godot_js_display_window_title_set: function (p_data) {
 		document.title = GodotRuntime.parseString(p_data);
@@ -645,8 +776,8 @@ const GodotDisplay = {
 		GodotDisplayListeners.add(canvas, 'drop', GodotDisplayDragDrop.handler(dropFiles));
 	},
 
-	godot_js_display_setup_canvas__sig: 'v',
-	godot_js_display_setup_canvas: function () {
+	godot_js_display_setup_canvas__sig: 'viii',
+	godot_js_display_setup_canvas: function (p_width, p_height, p_fullscreen) {
 		const canvas = GodotConfig.canvas;
 		GodotDisplayListeners.add(canvas, 'contextmenu', function (ev) {
 			ev.preventDefault();
@@ -655,6 +786,23 @@ const GodotDisplay = {
 			alert('WebGL context lost, please reload the page'); // eslint-disable-line no-alert
 			ev.preventDefault();
 		}, false);
+		switch (GodotConfig.canvas_resize_policy) {
+		case 0: // None
+			GodotDisplayScreen.desired_size = [canvas.width, canvas.height];
+			break;
+		case 1: // Project
+			GodotDisplayScreen.desired_size = [p_width, p_height];
+			break;
+		default: // Full window
+			// Ensure we display in the right place, the size will be handled by updateSize
+			canvas.style.position = 'absolute';
+			canvas.style.top = 0;
+			canvas.style.left = 0;
+			break;
+		}
+		if (p_fullscreen) {
+			GodotDisplayScreen.requestFullscreen();
+		}
 	},
 
 	/*

platform/javascript/js/libs/library_godot_os.js

@@ -58,21 +58,28 @@ const GodotConfig = {
 	$GodotConfig: {
 		canvas: null,
 		locale: 'en',
-		resize_on_start: false,
+		canvas_resize_policy: 2, // Adaptive
 		on_execute: null,
+		on_exit: null,
 
 		init_config: function (p_opts) {
-			GodotConfig.resize_on_start = !!p_opts['resizeCanvasOnStart'];
+			GodotConfig.canvas_resize_policy = p_opts['canvasResizePolicy'];
 			GodotConfig.canvas = p_opts['canvas'];
 			GodotConfig.locale = p_opts['locale'] || GodotConfig.locale;
 			GodotConfig.on_execute = p_opts['onExecute'];
-			// This is called by emscripten, even if undocumented.
-			Module['onExit'] = p_opts['onExit']; // eslint-disable-line no-undef
+			GodotConfig.on_exit = p_opts['onExit'];
 		},
 
 		locate_file: function (file) {
 			return Module['locateFile'](file); // eslint-disable-line no-undef
 		},
+		clear: function () {
+			GodotConfig.canvas = null;
+			GodotConfig.locale = 'en';
+			GodotConfig.canvas_resize_policy = 2;
+			GodotConfig.on_execute = null;
+			GodotConfig.on_exit = null;
+		},
 	},
 
 	godot_js_config_canvas_id_get__sig: 'vii',
@@ -84,11 +91,6 @@ const GodotConfig = {
 	godot_js_config_locale_get: function (p_ptr, p_ptr_max) {
 		GodotRuntime.stringToHeap(GodotConfig.locale, p_ptr, p_ptr_max);
 	},
-
-	godot_js_config_is_resize_on_start__sig: 'i',
-	godot_js_config_is_resize_on_start: function () {
-		return GodotConfig.resize_on_start ? 1 : 0;
-	},
 };
 
 autoAddDeps(GodotConfig, '$GodotConfig');
@@ -98,7 +100,6 @@ const GodotFS = {
 	$GodotFS__deps: ['$FS', '$IDBFS', '$GodotRuntime'],
 	$GodotFS__postset: [
 		'Module["initFS"] = GodotFS.init;',
-		'Module["deinitFS"] = GodotFS.deinit;',
 		'Module["copyToFS"] = GodotFS.copy_to_fs;',
 	].join(''),
 	$GodotFS: {
@@ -210,9 +211,10 @@ const GodotFS = {
 mergeInto(LibraryManager.library, GodotFS);
 
 const GodotOS = {
-	$GodotOS__deps: ['$GodotFS', '$GodotRuntime'],
+	$GodotOS__deps: ['$GodotRuntime', '$GodotConfig', '$GodotFS'],
 	$GodotOS__postset: [
 		'Module["request_quit"] = function() { GodotOS.request_quit() };',
+		'Module["onExit"] = GodotOS.cleanup;',
 		'GodotOS._fs_sync_promise = Promise.resolve();',
 	].join(''),
 	$GodotOS: {
@@ -224,6 +226,15 @@ const GodotOS = {
 			GodotOS._async_cbs.push(p_promise_cb);
 		},
 
+		cleanup: function (exit_code) {
+			const cb = GodotConfig.on_exit;
+			GodotFS.deinit();
+			GodotConfig.clear();
+			if (cb) {
+				cb(exit_code);
+			}
+		},
+
 		finish_async: function (callback) {
 			GodotOS._fs_sync_promise.then(function (err) {
 				const promises = [];

platform/javascript/os_javascript.cpp

@@ -93,35 +93,14 @@ void OS_JavaScript::send_notification_callback(int p_notification) {
 
 // Window (canvas)
 
-Point2 OS_JavaScript::compute_position_in_canvas(int x, int y) {
-	OS_JavaScript *os = get_singleton();
-	int canvas_x;
-	int canvas_y;
-	godot_js_display_canvas_bounding_rect_position_get(&canvas_x, &canvas_y);
-	int canvas_width;
-	int canvas_height;
-	emscripten_get_canvas_element_size(os->canvas_id, &canvas_width, &canvas_height);
-
-	double element_width;
-	double element_height;
-	emscripten_get_element_css_size(os->canvas_id, &element_width, &element_height);
-
-	return Point2((int)(canvas_width / element_width * (x - canvas_x)),
-			(int)(canvas_height / element_height * (y - canvas_y)));
+Point2 OS_JavaScript::compute_position_in_canvas(int p_x, int p_y) {
+	int point[2];
+	godot_js_display_compute_position(p_x, p_y, point, point + 1);
+	return Point2(point[0], point[1]);
 }
 
 bool OS_JavaScript::check_size_force_redraw() {
-	int canvas_width;
-	int canvas_height;
-	emscripten_get_canvas_element_size(canvas_id, &canvas_width, &canvas_height);
-	if (last_width != canvas_width || last_height != canvas_height) {
-		last_width = canvas_width;
-		last_height = canvas_height;
-		// Update the framebuffer size for redraw.
-		emscripten_set_canvas_element_size(canvas_id, canvas_width, canvas_height);
-		return true;
-	}
-	return false;
+	return godot_js_display_size_update() != 0;
 }
 
 EM_BOOL OS_JavaScript::fullscreen_change_callback(int p_event_type, const EmscriptenFullscreenChangeEvent *p_event, void *p_user_data) {
@@ -155,17 +134,13 @@ OS::VideoMode OS_JavaScript::get_video_mode(int p_screen) const {
 }
 
 Size2 OS_JavaScript::get_screen_size(int p_screen) const {
-
-	EmscriptenFullscreenChangeEvent ev;
-	EMSCRIPTEN_RESULT result = emscripten_get_fullscreen_status(&ev);
-	ERR_FAIL_COND_V(result != EMSCRIPTEN_RESULT_SUCCESS, Size2());
-	double scale = godot_js_display_pixel_ratio_get();
-	return Size2(ev.screenWidth * scale, ev.screenHeight * scale);
+	int size[2];
+	godot_js_display_screen_size_get(size, size + 1);
+	return Size2(size[0], size[1]);
 }
 
 void OS_JavaScript::set_window_size(const Size2 p_size) {
 
-	windowed_size = p_size;
 	if (video_mode.fullscreen) {
 		window_maximized = false;
 		set_window_fullscreen(false);
@@ -174,17 +149,14 @@ void OS_JavaScript::set_window_size(const Size2 p_size) {
 			emscripten_exit_soft_fullscreen();
 			window_maximized = false;
 		}
-		double scale = godot_js_display_pixel_ratio_get();
-		emscripten_set_canvas_element_size(canvas_id, p_size.x, p_size.y);
-		emscripten_set_element_css_size(canvas_id, p_size.x / scale, p_size.y / scale);
+		godot_js_display_desired_size_set(p_size.x, p_size.y);
 	}
 }
 
 Size2 OS_JavaScript::get_window_size() const {
-
-	int canvas[2];
-	emscripten_get_canvas_element_size(canvas_id, canvas, canvas + 1);
-	return Size2(canvas[0], canvas[1]);
+	int size[2];
+	godot_js_display_window_size_get(size, size + 1);
+	return Size2(size[0], size[1]);
 }
 
 void OS_JavaScript::set_window_maximized(bool p_enabled) {
@@ -229,20 +201,12 @@ void OS_JavaScript::set_window_fullscreen(bool p_enabled) {
 			// This must be called before requesting full screen.
 			emscripten_exit_soft_fullscreen();
 		}
-		EmscriptenFullscreenStrategy strategy;
-		strategy.scaleMode = EMSCRIPTEN_FULLSCREEN_SCALE_STRETCH;
-		strategy.canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF;
-		strategy.filteringMode = EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT;
-		strategy.canvasResizedCallback = NULL;
-		EMSCRIPTEN_RESULT result = emscripten_request_fullscreen_strategy(canvas_id, false, &strategy);
-		ERR_FAIL_COND_MSG(result == EMSCRIPTEN_RESULT_FAILED_NOT_DEFERRED, "Enabling fullscreen is only possible from an input callback for the HTML5 platform.");
-		ERR_FAIL_COND_MSG(result != EMSCRIPTEN_RESULT_SUCCESS, "Enabling fullscreen is only possible from an input callback for the HTML5 platform.");
-		// Not fullscreen yet, so prevent "windowed" canvas dimensions from
-		// being overwritten.
+		int result = godot_js_display_fullscreen_request();
+		ERR_FAIL_COND_MSG(result, "The request was denied. Remember that enabling fullscreen is only possible from an input callback for the HTML5 platform.");
 		entering_fullscreen = true;
 	} else {
 		// No logic allowed here, since exiting w/ ESC key won't use this function.
-		ERR_FAIL_COND(emscripten_exit_fullscreen() != EMSCRIPTEN_RESULT_SUCCESS);
+		ERR_FAIL_COND(godot_js_display_fullscreen_exit());
 	}
 }
 
@@ -815,7 +779,11 @@ void OS_JavaScript::initialize_core() {
 
 Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver, int p_audio_driver) {
 
-	godot_js_display_setup_canvas(); // Handle contextmenu, webglcontextlost
+	video_mode = p_desired;
+	// fullscreen_change_callback will correct this if the request is successful.
+	video_mode.fullscreen = false;
+	godot_js_display_setup_canvas(video_mode.width, video_mode.height, video_mode.fullscreen); // Handle contextmenu, webglcontextlost
+
 	swap_ok_cancel = godot_js_display_is_swap_ok_cancel() == 1;
 
 	EmscriptenWebGLContextAttributes attributes;
@@ -884,21 +852,6 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
 
 	video_driver_index = p_video_driver;
 
-	video_mode = p_desired;
-	// fullscreen_change_callback will correct this if the request is successful.
-	video_mode.fullscreen = false;
-	// Emscripten only attempts fullscreen requests if the user input callback
-	// was registered through one its own functions, so request manually for
-	// start-up fullscreen.
-	if (p_desired.fullscreen) {
-		godot_js_display_window_request_fullscreen();
-	}
-	if (godot_js_config_is_resize_on_start()) {
-		set_window_size(Size2(video_mode.width, video_mode.height));
-	} else {
-		set_window_size(get_window_size());
-	}
-
 	AudioDriverManager::initialize(p_audio_driver);
 	visual_server = memnew(VisualServerRaster());
 #ifndef NO_THREADS
@@ -998,20 +951,10 @@ bool OS_JavaScript::main_loop_iterate() {
 			strategy.canvasResizedCallback = NULL;
 			emscripten_enter_soft_fullscreen(canvas_id, &strategy);
 		} else {
-			set_window_size(Size2(windowed_size.width, windowed_size.height));
+			godot_js_display_size_update();
 		}
 		just_exited_fullscreen = false;
 	}
-
-	int canvas[2];
-	emscripten_get_canvas_element_size(canvas_id, canvas, canvas + 1);
-	video_mode.width = canvas[0];
-	video_mode.height = canvas[1];
-	if (!window_maximized && !video_mode.fullscreen && !just_exited_fullscreen && !entering_fullscreen) {
-		windowed_size.width = canvas[0];
-		windowed_size.height = canvas[1];
-	}
-
 	return Main::iteration();
 }
 

platform/javascript/os_javascript.h

@@ -42,7 +42,6 @@
 class OS_JavaScript : public OS_Unix {
 private:
 	VideoMode video_mode;
-	Vector2 windowed_size;
 	bool window_maximized;
 	bool entering_fullscreen;
 	bool just_exited_fullscreen;