On 3/4/2011 12:21 AM, Kenneth Rohde Christiansen wrote:
Hi there,

I do not exactly understand what you are trying to do (you want the
canvas to cover the whole view?), but for me
I'm trying to keep the canvas bitmap at the same pixel resolution as the device,
otherwise it is blurry.

This, for example, works if the pixel ratio is 2.
<canvas style="width: 100px; height: 100px;" width="200" height="200"></canvas>

This returns true, always, on non-mobile platforms, it seems:
window.matchMedia('(-webkit-min-device-pixel-ratio: 1)');
makes perfect sense on the desktop, as the content isn't scaled up in
any way (except user zooming). It means that one css pixel should
correspond to one screen pixel given your current screen resolution.
Yes, when the user has a zoom level set, I'd like to paint to match the pixel ratio, so that, a zoomed in user still receives crisp output, instead of blurry output.

On the other hand on many Android devices (most 240 DPI) the web
contents using a viewport meta tag is scaled up with 1.5 due to most
mobile pages being designed for a DPI of 160, and so the
-webkit-device-pixel-ratio reports 1.5. On the iPhone 4, the contents
is scaled up by 2.0 due to the retina display and the
-webkit-device-pixel-ration will report 2.0.
Yes, Android and Mobile Safari distributions work fine.

-Charles


Cheers
Kenneth

On Fri, Mar 4, 2011 at 8:16 AM, Charles Pritchard<ch...@jumis.com>  wrote:
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
_______________________________________________
webkit-dev mailing list
webkit-dev@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev




_______________________________________________
webkit-dev mailing list
webkit-dev@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev

Reply via email to