Fix rendering for higher resolution displays.

[mbebenita]

Take window.devicePixelRatio into account when rendering to the canvas.

  var devicePixelRatio = window.devicePixelRatio || 1;
  MIDP.ScreenHeight = c.height;
  MIDP.ScreenWidth = c.width;
  c.height *= devicePixelRatio;
  c.width *= devicePixelRatio;
  c.style.height = MIDP.ScreenHeight + "px";
  c.style.width = MIDP.ScreenWidth + "px";

and then scale the context.

If I do this, layout ends up looking distorted, including font sizes.

[TimAbraldes]

What kind of rendering issues are we seeing currently on devices where window.devicePixelRatio is greater than 1? If my understanding of that property is correct, we're seeing artifacts from inadequate upscaling?

If I do this, layout ends up looking distorted, including font sizes.

In midp/gfx.js, in the DisplayDevice.getScreen[Width|Height]0 functions, we're reporting the canvas height/width to the MIDlet instead of MIDP.Screen[Width|Height]. Since we're now scaling the canvas' height/width, I'd bet we need to report the element's height/width instead.

[mbebenita]

Do you happen to know what window.devicePixelRatio is on a Flame device?

[TimAbraldes]

Navigating to http://www.quirksmode.org/m/tests/widthtest.html using the browser app on a Flame shows 1.5 as the window.devicePixelRatio value

[mbebenita]

Ahh, this explains the poor quality text rendering. On Feb 3, 2015 12:34 PM, "Tim Abraldes" notifications@github.com wrote:

Navigating to http://www.quirksmode.org/m/tests/widthtest.html using the browser app on a Flame shows 1.5 as the window.devicePixelRatio value

— Reply to this email directly or view it on GitHub https://github.com/mozilla/j2me.js/issues/997#issuecomment-72728952.