[webkit-dev] Canvas backing resolution
Charles Pritchard
chuck at jumis.com
Thu Mar 3 23:16:49 PST 2011
Is there currently an accepted way within webkit to get the resolution
which should be used for an HTML canvas backing store?
Currently, on Mobile Safari and Android, I can use window.devicePixelRatio,
on the desktop, I use window.outerWidth / window.innerWidth and on FF4,
I use
a big string of CSS min-pixel-device-ratio CSS selectors, as fall
through case statements,
and on IE9, its exposed through window.screen.
I noticed over at the bookstore, as I pawed a color kindle, that I
didn't get the mixture right,
for that device. Time is running out for me on some distros, as Sidebars
come into use,
as they'll break the inner/outerWidth hack.
Anyway, that's the story. Is there a method to get the current, proper
pixel ratio, between CSS and device pixels,
across webkit distributions?
---
FF4 hack, example:
#canvas.CompatibilityMozScreen { width: 1px; }
@media all and (min--moz-device-pixel-ratio: .3) {
#canvas.CompatibilityMozScreen { width: .3px; }
}
@media all and (min--moz-device-pixel-ratio: .5) {
#canvas.CompatibilityMozScreen { width: .5px; }
}
... continued many times, based on:
http://kb.mozillazine.org/Toolkit.zoomManager.zoomValues
This trick does not seem to with webkit, or it is otherwise restricted
to mobile devices:
This returns true, always, on non-mobile platforms, it seems:
window.matchMedia('(-webkit-min-device-pixel-ratio: 1)');
---
I'm hoping for a resolution to this issue, as we do use the canvas tag,
and our canvas elements appear a little blurry on some devices:
without a solution, some of our users will have to manually adjust the
"sharpness" of the site... adjusting a website until it
comes into focus seems a bit strange.
-Charles
More information about the webkit-dev
mailing list