[webkit-dev] Canvas backing resolution

[Charles Pritchard]

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