-
-
Notifications
You must be signed in to change notification settings - Fork 417
Description
If an html5 app made with Lime/OpenFL is zoomed up in Chrome (didn't check the other browsers), like 500% or such, it becomes blurry. But if the page is reloaded without zooming back to 100%, the app becomes looking good. Can be tested in PiratePig app from OpenFL samples.
I found that this happens because HTML5Window.hx only reads Browser.window.devicePixelRatio once in the constructor and caches it in scale variable (line 108). Then scale is used to set parent scale and to calculate canvas width and height.
PiratePig_scale.mp4
I could fix it the issue reading Browser.window.devicePixelRatio in updateSize() (line 1282) and changing scale, parent scale and canvas dimensions like this:
var newScale = Browser.window.devicePixelRatio;
if (scale != newScale) {
scale = newScale;
parent.__scale = scale;
if (canvas != null)
{
canvas.width = Math.floor(parent.__width * scale);
canvas.height = Math.floor(parent.__height * scale);
canvas.style.width = parent.__width + "px";
canvas.style.height = parent.__height + "px";
}
}
I had to modify openfl.display.Stage.hx too to make the renderer adapt to the possible pixel ratio change in __resize() like this:
if (__renderer != null)
{
__renderer.__pixelRatio = #if openfl_disable_hdpi 1 #else window.scale #end;
}