Defold configurable DPI scaling for HTML5 games

engine_template.html

<!--
Usage:
1) Copy engine_template.html from builtins folder
2) Select it as your custom HTML5 template in game.project
3) Replace the <script id='engine-setup'> section below with your desired DPI settings
-->
<script id='engine-setup' type='text/javascript'>
	//
	// Here you can configure game startup parameters via the CUSTOM_PARAMETERS object.
	//

	// Example of using hardware scaler on GPU (implemented in browsers).
	// This is especially useful for 3D games and low spec devices!
	// The Defold game renders to its canvas size, and then the browser
	// upscales this canvas to the actual display size using GPU hardware scaling.
	// By rendering at a lower resolution and letting the browser upscale,
	// you can significantly improve performance while maintaining visual quality.

	// Graphics quality settings for HTML5 games based on device pixel ratio could be like:
	// window.devicePixelRatio * 0.25 = ultra low
	// window.devicePixelRatio * 0.5  = low
	// window.devicePixelRatio * 0.75 = medium
	// window.devicePixelRatio * 1    = high
	// 
	// Note: For devices with devicePixelRatio = 1 (regular monitors), this scaling approach
	// may not be suitable, as they already have large physical pixels on screen. For such
	// devices, you may want to use different quality settings or skip DPI scaling entirely.
	// 
	window.gameCanvasDpi = window.devicePixelRatio * 0.25; // <-- we assign to `window` to use it in Lua

	// Custom resize callback
	// This is essentially the code from dmloader.js, but slightly modified
	// to support custom canvas DPI scaling via our window.gameCanvasDpi
	const is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
	let prevInnerWidth = -1;
	let prevInnerHeight = -1;
	let prevCanvasDpi = -1;
	window.gameResizeWindowCallback = function() {
		// Hack for iOS when exit from Fullscreen mode
		if (is_iOS) {
			window.scrollTo(0, 0);
		}

		let buttonHeight = 0;
		{{#html5.show_made_with_defold}}
		buttonHeight = 42;
		{{/html5.show_made_with_defold}}
		{{#html5.show_fullscreen_button}}
		buttonHeight = 42;
		{{/html5.show_fullscreen_button}}

		const innerWidth = window.innerWidth;
		const innerHeight = window.innerHeight - buttonHeight;
		if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight && prevCanvasDpi == window.gameCanvasDpi)
		{
			return;
		}
		prevInnerWidth = innerWidth;
		prevInnerHeight = innerHeight;
		prevCanvasDpi = window.gameCanvasDpi;

		// Debug logging
		console.log("resize_window_callback: innerWidth =", innerWidth, "innerHeight =", innerHeight, "window.gameCanvasDpi =", window.gameCanvasDpi);

		const app_container = document.getElementById("app-container");
		const game_canvas = document.getElementById("canvas");
		app_container.style.width = innerWidth + "px";
		app_container.style.height = innerHeight + buttonHeight + "px";
		game_canvas.width = Math.floor(innerWidth * window.gameCanvasDpi);
		game_canvas.height = Math.floor(innerHeight * window.gameCanvasDpi);
	};
	CUSTOM_PARAMETERS["resize_window_callback"] = window.gameResizeWindowCallback;

	// Force call resize window callback to update the game canvas size
	window.gameResizeWindowCallback();

	// Now you can change DPI settings from Lua code using html5.run():
	// local user_dpi = tonumber(html5.run("window.devicePixelRatio"));
	// html5.run("window.gameCanvasDpi = " .. (user_dpi * 0.5) .. "; window.gameResizeWindowCallback();")
	// This will update the canvas DPI and trigger a resize to apply the changes.
</script>