Kha
Kha copied to clipboard
Incorrect reported window size using Electron / Debug HTML5
Describe the bug
kha.window.notifyOnResize provides incorrect width and height values when using Debug HTML5 / Electron
To Reproduce Steps to reproduce the behavior:
- Add a simple callback to
kha.window.notifyOnResizethat prints both width and height values. - Run project using native and make note of the reported values.
- Run project using debug HTML5 and make note of the reported values.
- The two values do not match.
Expected behavior The output of Debug HTML5 should match that of the native application.
Screenshots

Execution Environment:
- Host system (where you compile your code): Arch Linux x86_64 5.12.14-arch1-1
- Target system (where you run your code): Same as the host system
- IDE used (if any): VSCodium (fork of Visual Studio Code)
- Kha revision: a906804e
- Kha build output (Using Kha...):
Creating Kha project.
Compiling shader 1 of 8 (painter-colored.frag.glsl).
Compiling shader 2 of 8 (painter-colored.vert.glsl).
Compiling shader 3 of 8 (painter-image.frag.glsl).
Compiling shader 4 of 8 (painter-image.vert.glsl).
Compiling shader 5 of 8 (painter-text.frag.glsl).
Compiling shader 6 of 8 (painter-text.vert.glsl).
Compiling shader 7 of 8 (painter-video.frag.glsl).
Compiling shader 8 of 8 (painter-video.vert.glsl).
Using Kinc (c36a3e67) from /home/doczid/Projects/Programming/kha/Kha/Kinc
kincfile found.
Creating Linux project files.
Compiling...
make: 'New-Project' is up to date.
Build time: 0m 0s
Starting Kinc
Starting application
- Application output (if it runs): For Debug HTML5:
ScaleManager.hx:8: New window: 926 x 1280
For native:
ScaleManager.hx:8: New window: 766 x 1059
Additional context Maybe it's a Linux specific issue?
I managed to narrow down the issue to DPI scaling.
On my setup, I change the Xft.dpi parameter for the X11 Server from the default 96 to a non-standard 80. Temporarily resetting it to 96 makes Electron display the correct window size and Kha reports it correctly, too.
I am 99% sure this is an Electron issue, however, if it can be universally fixed by e.g.: including the screen module and checking the scale factor in electron.js, I think it would benefit Kha / Khamake.
Kha should always report the size in pixels, independent of dpi-settings. We're probably still missing something to make that work properly in html5, will have a look.
The plot thickens...
When launching from the terminal, the resolution is reported correctly. However, when launching from the VSCode build task, the resolution is incorrect! I have checked if it's related to VSCode zoom settings, and it is not. I will try to check what enviromental variables VSCode passes, maybe the issue lies there.
I think this issue is safe to close now as it probably has no relation to Kha, only to Electron/Linux/VSCode.
Still want to have a look :) And GitHub should really add support for issue-priorities.
I found out that the issue only occurs when the debugger type is pwa-chrome. Using node, chrome or even pwa-node resolves the issue. However, debugging is made more difficult due to having to set the output capture source to standard output, which also captures Chromium logs.
I can confirm that the issue lied with Electron's automatic HiDPI scaling. Adding the command line flag --force-device-scale-factor=1 makes kha.System.windowWidth() / kha.System.windowHeight() behave normally, and it does not change the appearance of the display at all.
Relevant question: I want to add this command line switch permanently via electron.js. Is there a way to override electron.js like with index.html via the Assets directory or do I need to mess with khamake?
If it's the latter, I will probably create a PR that allows setting it to 1 via a khafile.js parameter like project.targetOptions.html5.electronDisableScaling.
Currently "--force-device-scale-factor=1" makes electron window blurry on any device with dpi > 1.
If you try to remove that flag from launch.json, kha window resize logic stops working.
Idk why resizing actually works in electron currently, there is no code like canvas.width = window.width * devicePixelRatio