[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] How to set a canvas backing store to display units?

On Tue, Jun 12, 2012 at 4:16 PM, James Robinson <jamesr@google.com> wrote:

On Tue, Jun 12, 2012 at 4:12 PM, Gregg Tavares (社用) <gman@google.com> wrote:
So now that there are a few hd-dpi devices any thoughts has to how to set a canvas's backing store to 1x1 to display pixels?

Ideally it would be as simple as

widthInCSSUnits = canvas.clientWidth;
heightInCSSUnits = canvas.clientHeight;

canvas.width = convertCSSUnitsToDeviceUnits(widthInCSSUnits);
canvas.height =convertCSSUnitsToDeviceUnits(widthInCSSUnits);

Unfortunately I don't know how to write 'convertCSSUnitsToDeviceUnits'

For example the new MacBook Pro with hd-dpi displays apparently have

all of the following options 

2 to 1        (1440 css units scaled to 2880 device units)
1.5 to 1      (1920 css units scaled to 2880 device units)
1.7143 to 1   (1680 css units scaled to 2880 device units)

Ideally, from JS I should be able to render to a canvas at 1x1 pixels with the display regardless of which mode the system is set to by choosing a backing store size that matches. But as far as I can tell there's no API to figure that out at the moment.

Should there be?

I'd suggest something like:

canvas.width = widthInCSSUnits * window.devicePixelRatio;
canvas.height = heightInCSSUnits * window.devicePixelRatio;

Awesome! So simple too. I'll give it a try.

- James