[webkit-dev] Canvas backing resolution

[Charles Pritchard]

On 3/4/2011 1:35 AM, Kenneth Rohde Christiansen wrote:
> 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.

I haven't debugged with enough tablet devices, such as the color kindle, 
to know how many webkit distros it works with.
What should I do about user zoom on the desktop (and possibly, the kindle) ?

Drawing in high res, just-in-case, makes for a poorer experience for 
users at a 1.0 ratio,
and asking users to slide a "sharpen" slider is a little awkward.

Mozilla, in their implementation, has setup device-pixel-ratio to scale 
when the user scales content;
they directly expose window css pixel ratio value to trusted scripts, 
but not to web content; requiring
web content to use css device-pixel-ratio.

Microsoft has exposed the values through window.screen.



-Charles