[webkit-dev] Canvas backing resolution

Kenneth Rohde Christiansen kenneth.christiansen at gmail.com
Fri Mar 4 11:24:43 PST 2011

Hey Oliver!

If you are saying that device-pixel-ratio should include the user
scaling, then I can push that for Qt, but I would really like seeing
it supported by iOS as well for compatibility reasons. If you create a
bug for that, please cc me.


On Fri, Mar 4, 2011 at 8:11 PM, Oliver Hunt <oliver at apple.com> wrote:
> WebKit's canvas implementation has always scaled the backing buffer according to actual screen resolution,  i suspect it doesn't pay any attention to zoom however :-/
> Arguably that's a bug.
> --Oliver
> On Mar 4, 2011, at 10:08 AM, Charles Pritchard wrote:
>> In the future?
>> On Mar 4, 2011, at 8:51 AM, Oliver Hunt <oliver at apple.com> wrote:
>>> For reference desktop webkit implementations will automatically increase the canvas backing store resolution as the device:css pixel ratio increases.
>>> --Oliver
>>> On Mar 4, 2011, at 1:44 AM, Charles Pritchard wrote:
>>>> 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
>>>> _______________________________________________
>>>> 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 ﹆﹆﹆

More information about the webkit-dev mailing list