HTML5 Adaptive canvas scaling regression

[cg9999]

Godot version

v4.0.beta9.official [e780dc3]

System information

Linux, Firefox 108.0.1

Issue description

When HTML5 canvas resize policy is set to adaptive and Display>Window>Stretch>Mode is either Viewport or Canvas_items, the exported HTML5 project scales wrong, at least on Firefox.

This same setup worked fine in godot 3.5.1, scaling the canvas to maximal possible size without distorting.

On 4.0 beta 9, the graphics scaling is wrong, while the mouse behaves as the graphics would have been scaled properly (mouse pointer is out of sync with the project mouse location)

Steps to reproduce

Create new project, add some items to 2D canvas, export HTML5 with the settings described above

Here's how the scaling looks like:
https://user-images.githubusercontent.com/98854/209177467-d027225a-fda3-416a-91aa-c06b02f4e506.mp4

Minimal reproduction project

canvasresize.zip

[lesleyrs]

Edit: Windows 10, Chrome but also desktop. Godot 4.0 beta 10.

I was about to post a similar issue but not the same, they're probably related though.

When I was trying web build I saw that a basic button had a letter cut off, even though there's plenty of space on the button. For some reason adding whitespace or another letter fixes the problem sort of.

Later I found out that I can reproduce it on normal PC build by simply maximizing the screen. Going from maximized back to normal size also recovers the cut off letter.

After changing from canvas_items to viewport it fixed the problem. I am aware that canvas_items (new 2d mode) sacrifices accuracy for higher resolution but if there is enough space on screen that it doesn't use, it's a bug yes?

Another edit: It also just happened by just manually increasing stretch mode. Does that work just like canvas_items?

[Calinou]

When I was trying web build I saw that a basic button had a letter cut off, even though there's plenty of space on the button. For some reason adding whitespace or another letter fixes the problem sort of.

This is an unrelated bug with font oversampling. As a workaround, you can keep using the canvas_items stretch mode but disable font oversampling in the advanced project settings.

[bcmpinc]

I'm having this issue as well. Tested with v4.0.beta10.official [d0398f6] in Firefox and it scales wrong (it looks as if somewhere in calculating the projection matrix, width and height get flipped). In Chromium however the scaling does work properly.

[bcmpinc]

For Display>Window>Stretch>Mode set to Viewport, here's a workaround.

1. Set the canvas resize policy to project.
2. In the generated *.js file replace the updateSize function with:

 updateSize: function() {
  const isFullscreen = GodotDisplayScreen.isFullscreen();
  const width = GodotDisplayScreen.desired_size[0];
  const height = GodotDisplayScreen.desired_size[1];
  const canvas = GodotConfig.canvas;
  if (canvas.width !== width || canvas.height !== height) {
   canvas.width = width;
   canvas.height = height;
   GodotDisplayScreen._updateGL();
  }
  const scale = Math.min(window.innerWidth / width, window.innerHeight / height);
  const csl = `${Math.round((window.innerWidth - width*scale)/2)}px`;
  const cst = `${Math.round((window.innerHeight - height*scale)/2)}px`;
  const csw = `${Math.round(width*scale)}px`;
  const csh = `${Math.round(height*scale)}px`;
  if (canvas.style.width !== csw || canvas.style.height !== csh) {
   canvas.style.position = "absolute";
   canvas.style.imageRendering = "pixelated"; // Remove this if you want linear scaling.
   canvas.style.top = cst;
   canvas.style.left = csl;
   canvas.style.width = csw;
   canvas.style.height = csh;
   return 1;
  }
  return 0;
 }

[cg9999]

Not sure what changed, but as of -RC3, the scaling seems to work correctly now in firefox.

[akien-mga]

I confirm that the MRP works fine with 4.0 RC 3.