936906 - Should be able to set devicePixelRatio using JavaScript

Status: RESOLVED DUPLICATE of bug 737090

(Firefox for Android Graveyard :: Toolbar, defect)

Description

[Liam Wilson]

Attachment: canvas_banding_example.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131028113308

Steps to reproduce:

Created test webpage (see attached). It attempts to create and display a Canvas with a width and height set exactly to the native resolution of the window. It does this using a meta viewport trick (injects some HTML in to the head of the document setting "initial-scale" to 1/window.devicePixelRatio).


Actual results:

On my Nexus 7 (2012). It created a canvas of 853x469 (landscape). That is the wrong resolution (should be 1280*something). The example above sets the correct resolution in Chrome Android (but it too has banding artifacts suggesting something is still off, see: http://code.google.com/p/chromium/issues/detail?id=317175)


Expected results:

Should be able to create a Canvas which is exactly the same resolution as the native window. I've read lots of blog posts about this. They all contain horrible hacks that attempt to fix the problem (as does my example). All of these hacks don't quite work (like doing canvas.width=screen.width*window.devicePixelRatio, this cannot work right because screen.width is something like Math.round(realwidth/window.devicePixelRatio))

It occurs to me that all these hacks would be unnecessary if I could just go window.devicePixelRatio=1

Comment 1

[Kartikaya Gupta (email:[e-mail])]

This is more or less a dupe of bug 737090; the target-densitydpi meta-viewport attribute handled this use case but for reasons that are not really clear it was removed. It would probably be worthwhile to restart the discussion on the W3C mailing lists to bring this back or at least bring back some suitable replacement.

Comment 2

[Liam Wilson]

The motivating example is things like Canvas/WebGL demos. I want to be able to create a canvas with exactly the same resolution as the window (or to be able to create a canvas which uses exactly nxn screen pixels (with linear upscaling) per canvas pixel) and I would like the canvas to be aligned exactly with the real screen pixels. Not being able to do this will mean that the canvas will be blurry/have banding artifacts (regardless of how hires the screen is).As things currently stand this is either very difficult or impossible to do.

I did manage to discover that I can set layout.css.devPixelsPerPx to 1 in about:config. This seems to do exactly what I want to achieve (except that for some reason my canvas extends under the address bar).

Comment 3

[Kartikaya Gupta (email:[e-mail])]

As it stands there's nothing actionable here; any proposals of this sort should go through standards processes. I'm going to close this bug as a dupe.