[webkit-dev] Canvas backing resolution

Kenneth Rohde Christiansen kenneth.christiansen at gmail.com
Fri Mar 4 01:35:34 PST 2011

Hi again,

> I'm trying to keep the canvas bitmap at the same pixel resolution as the
> device,
> otherwise it is blurry.

OK, I see.

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

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

-webkit-device-pixel-ratio does not change when the user scaled the
content; it is a device value.

On old iPhone it is 1.0, on Android it can be 0.5, 1.0 and 1.5
depending on it being a low, medium (160) or high dpi (240) device. On
the iPhone 4 and the new iPod Touch it is 2.0.

On Android devices, with for instance, a device-pixel-ratio of 1.5,
you can disable the upscaling by adding target-densitydpi=device-dpi
to the viewport meta tag.

What you can do is to disable user scaling (add user-scaling=no to the
viewport meta tag) and then handle zooming in your app using the touch
events. This only works on mobile devices though.


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

More information about the webkit-dev mailing list