[webkit-dev] Canvas backing resolution

[Kenneth Rohde Christiansen]

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

> 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.
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.

Cheers
Kenneth

On Fri, Mar 4, 2011 at 8:16 AM, Charles Pritchard <chuck at 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 at lists.webkit.org
> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>



-- 
Kenneth Rohde Christiansen
Senior Engineer
Application and Service Frameworks, Nokia Danmark A/S
Phone  +45 4093 0598 / E-mail kenneth.christiansen at gmail.com

http://codeposts.blogspot.com ﹆﹆﹆