[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 <firstname.lastname@example.org>
On Tue, Jun 12, 2012 at 4:12 PM, Gregg Tavares (社用) <email@example.com>
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);
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.