[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:

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.


More information about the webkit-dev mailing list