html5 support for devicePixelRatio

[juakob]

here is the suppose fix change:

https://github.com/Kode/Kha/blob/c1a78cf65717bcf4a7ec971e8dd7ac28d4d65701/Backends/HTML5/kha/SystemImpl.hx#L445-L446 lines to var displayWidth = Std.int(canvas.clientWidth window.devicePixelRatio); var displayHeight = Std.int(canvas.clientHeight window.devicePixelRatio);

https://github.com/Kode/Kha/blob/master/Backends/HTML5/kha/Window.hx#L65 and https://github.com/Kode/Kha/blob/c1a78cf65717bcf4a7ec971e8dd7ac28d4d65701/Backends/HTML5/kha/Window.hx#L75 to return canvas.width == 0 ? defaultWidth : canvas.width; return canvas.height == 0 ? defaultHeight : canvas.height;

and we need to change https://github.com/Kode/khamake/blob/2812bb4195411999ba5fd3df735958cc042c4c18/Data/html5/index.html#L8 to canvas id="{CanvasId}" width="{Width}" height="{Height}" style="width: {Width}px; height: {Height}px;" tabindex="-1"></canvas

the problem with the last change is that it wont take effect in working proyects unless you delete index.html in your build. If you dont have the last change the canvas will scale up in devices with pixelRatio other than 1

[juakob]

ref https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

[wighawag]

dpi scaling should be a non-default option for the reason mentioned there : https://github.com/Kode/Kha/pull/762

the canvas would scale indefinitely unless correct css is applied

[juakob]

I agree it should be an optional, not sure if non-default option. I think high density monitors are the future, other targets use it by default and its way easier to help somebody with an exact error(the canvas scales to infinity) than sombody saying "it looks funny". @wighawag you clearly know more about css than me, so I might be missing something about using this inside a site or somthing

[wighawag]

The problem in setting it as the default behavior is that a game could start failing after a website change.

Let say for example you build a game that use such dpi scaling. You upload the game to a website that use css to make it work, but then later the website decide to change and the css is not applied anymore.

That's why I think we should make dpi scaling a non-default option. If we want the same thing on all platform, then the only option would be to make dpi scaling a non-default option everywhere

Of course if you are in control of the website in question, there is no problem and you can simply enable dpi scaling without fear.

[wighawag]

Actually there might be another way : If we could detect such infinite growth by detecting clientWith/clientHeight change and revert the scale in that case

Here is the code, but I did not tested it fully

var displayWidth  = canvas.clientWidth;
var displayHeight = canvas.clientHeight;

var dpiAwareDisplayWidth = Std.int(displayWidth * window.devicePixelRatio);
var dpiAwareDisplayHeight = Std.int(displayHeight * window.devicePixelRatio);

// Check if the canvas framebuffer is not the same size.
if (canvas.width  != dpiAwareDisplayWidth ||
    canvas.height != dpiAwareDisplayHeight) {

    // Make the canvas framebuffer the same size
    canvas.width  = dpiAwareDisplayWidth;
    canvas.height = dpiAwareDisplayHeight;

    // but ensure if does not change the display size
    if(canvas.clientWidth != displayWidth ||
        canvas.clientHeight != displayHeight) {
           // in whcih case do not consider dpi as the canvas framebuffer size define the display size (no css constraints
            canvas.width = displayWidth;
            canvas.height = displayHeight;
    }
}