Re: [webkit-dev] Canvas backing resolution
On Apr 5, 2011, at 9:52 PM, Charles Pritchard wrote: Long-story-short, can we please expose some of the CSS pixel scaling, either through window.devicePixelRatio I typed javascript:alert(devicePixelRatio) in Safari on my iPhone 4, and got the value 2. Isn’t this what you are asking for? -- Darin ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
He wants a way to detect Desktop zoom (which is done two different ways in WebKit). It's difficult to figure out how to expose these, since Desktop zoom is ultimately just the CSS zoom property, which can be applied to any element (so folding it into a global makes little sense). The other kind of Desktop zoom that involves a fixed scale factor applies a transform. Again, transforms can be applied to descendant elements as well, so relying solely on what happened to be specified at the document level makes little sense. I'm not really sure how to easily solve this problem. I suppose we could just mix in document-level zoom and transform state into devicePixelRatio, but that feels inelegant to me given that individual child elements can change the zoom and transform. It wouldn't necessarily be accurate. I also don't like the idea of having to re-resolve style just because the zoom level changed. That would just slow things down. dave (hy...@apple.com) On Apr 6, 2011, at 9:17 AM, Darin Adler wrote: On Apr 5, 2011, at 9:52 PM, Charles Pritchard wrote: Long-story-short, can we please expose some of the CSS pixel scaling, either through window.devicePixelRatio I typed javascript:alert(devicePixelRatio) in Safari on my iPhone 4, and got the value 2. Isn’t this what you are asking for? -- Darin ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
On 4/6/2011 12:32 PM, David Hyatt wrote: He wants a way to detect Desktop zoom (which is done two different ways in WebKit). It's difficult to figure out how to expose these, since Desktop zoom is ultimately just the CSS zoom property, which can be applied to any element (so folding it into a global makes little sense). The other kind of Desktop zoom that involves a fixed scale factor applies a transform. Again, transforms can be applied to descendant elements as well, so relying solely on what happened to be specified at the document level makes little sense. The descendant elements are under the control of the author. That is, if I decide to use body.style.webkitTransform, in my scripting environment, I'm going to know that, because I initiated the request, and I'll add that to my calculations. Worst case, I can always walk the DOM, grab the transform style, and use CSSMatrix to calculate values. With desktop zoom, the user initiates through the UA, which sends a resize event through to window, but the scale is not directly exposed to the scripting environment in WebKit. I am simply looking for the scale factor; this is an accessibility issue, for users who are using the UA zoom. I'm not really sure how to easily solve this problem. I suppose we could just mix in document-level zoom and transform state into devicePixelRatio, but that feels inelegant to me given that individual child elements can change the zoom and transform. It wouldn't necessarily be accurate. I also don't like the idea of having to re-resolve style just because the zoom level changed. That would just slow things down. Current use of window.devicePixelRatio is static, we might as well keep it that way. On mobile devices, authors disable UA scaling and handle the entire process themselves. I see adding a pixel ratio property to window.screen as the cleanest solution. CSS checks work, they're not slow, but they're extra work on the author, and in-elegant, as media matches return booleans, not float values. They're inefficient, but not slow in any practical sense. I'm really open to any kind of help I can give here. I've full experience implementing the stack, from multi-level descendant transforms starting at document.body, to the hacks necessary to get window.screen.pixelRatio, and still support an additional magnification AT, such as ZoomText or the OS magnifier. I also have experience with transform3d/webgl, but that's a different issue. I've spoken to reps from both Google (re: TV) and Microsoft about having distinct X and Y ratios, as MS currently does in screen. Robert O suggested that tracking horizontal and vertical scaling separately was unnecessary (non square pixels) on modern displays. Both reps agreed. It doesn't harm anything, to have both X and Y scale values, but it does not seem to be necessary. http://msdn.microsoft.com/en-us/library/ms535868(v=vs.85).aspx Netscape exposes the value to trusted scripts as screenPixelsPerCSSPixel through their Utils Components interface. https://developer.mozilla.org/en/NsIDOMWindowUtils -Charles ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
On Apr 6, 2011, at 3:01 PM, Charles Pritchard wrote: On 4/6/2011 12:32 PM, David Hyatt wrote: He wants a way to detect Desktop zoom (which is done two different ways in WebKit). It's difficult to figure out how to expose these, since Desktop zoom is ultimately just the CSS zoom property, which can be applied to any element (so folding it into a global makes little sense). The other kind of Desktop zoom that involves a fixed scale factor applies a transform. Again, transforms can be applied to descendant elements as well, so relying solely on what happened to be specified at the document level makes little sense. The descendant elements are under the control of the author. That is, if I decide to use body.style.webkitTransform, in my scripting environment, I'm going to know that, because I initiated the request, and I'll add that to my calculations. Yeah, that's a good point. I see adding a pixel ratio property to window.screen as the cleanest solution. This seems like a decent solution to me. Probably simplest to just match what WinIE did for compatibility (even though it's two properties). dave (hy...@apple.com) ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
Did this move anywhere? http://www.w3.org/Bugs/Public/show_bug.cgi?id=11328 https://bugs.webkit.org/show_bug.cgi?id=51190 http://code.google.com/p/chromium/issues/detail?id=66656 Firefox is a nasty CSS hack, but it does work, and that's something to be happy about. Microsoft makes it easy; Firefox developers have said they do not want it to be easy. http://msdn.microsoft.com/en-us/library/ms535868(v=vs.85).aspx https://bugzilla.mozilla.org/show_bug.cgi?id=486200 From Robert O, reflecting Mozilla's policy: I don't want Web authors to have easy access to information about screen pixels. They'll try to defeat our zooming or size things to screen pixels, which we don't want. WebKit and MS already diverge from Firefox in handling of window.innerWidth/innerHeight and window.screen properties. That's not news. I'd really like to see a resolution to this issue. The hacks I'm using just aren't stable in the long term. I'd prefer the property were just exposed to the DOM via window.screen, as MS has done it, but I'm ok doing CSS media queries. It's just that media queries require something of a brute-force of case statements; I have about ~12 media queries to handle Firefox, all just repeating min media query, trying to narrow down the resolution. Long-story-short, can we please expose some of the CSS pixel scaling, either through window.devicePixelRatio, through CSS media queries on device-pixel-ratio, or through the window.screen object, in a way similar to how MS has done it Anything will work.. I just need one. -Charles On 3/4/2011 12:02 PM, Kenneth Rohde Christiansen wrote: Hi Simon, I guess you could use the media query listener defined in http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface We support that on trunk now. This of course means that we will need to reevaluate the CSS when a pinch zoom ends, which we might be doing already given media queries such as @media all and (min-width: 200px). Cheers Kenneth On Fri, Mar 4, 2011 at 8:47 PM, Simon Frasersimon.fra...@apple.com wrote: On Mar 4, 2011, at 11:24 AM, Kenneth Rohde Christiansen wrote: 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. There's a problem with that, which is that the author can assume (possibly erroneously) that device-pixel-ratio doesn't change for the life of the page. However, the zoom level can change often, and there's no notification that the author can register for that will tell them when the zoom level changes, and thus when they'll need to redraw their canvas contents. Simon ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
On Fri, Mar 4, 2011 at 8:16 AM, Charles Pritchard ch...@jumis.com wrote: 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. For reference: in November, there was a thread on the whatwg mailing list regarding this problem: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-November/029072.html If that is something we want to solve, that should go through standardisation in my opinion. There are already too many methods available, let's not create a new one :) cheers, Benjamin ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
On 3/5/2011 5:41 AM, Benjamin wrote: On Fri, Mar 4, 2011 at 8:16 AM, Charles Pritchard ch...@jumis.com mailto:ch...@jumis.com wrote: 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. For reference: in November, there was a thread on the whatwg mailing list regarding this problem: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-November/029072.html If that is something we want to solve, that should go through standardisation in my opinion. There are already too many methods available, let's not create a new one :) As with applying css to things like scroll bars, Mozilla is immovable in their position. WebKit and Mozilla currently take different routes on items like css on scroll bars and on window screen units. You can simply compare the MS/WebKit window.outerWidth/innerWidth and window.screen objects to Mozilla's to see that divide. Mozilla's current requirement of using CSS selectors falls within existing practice. And I posted their method at the start of this thread. -webkit-min-device-pixel-ratio and -moz-device-pixel-ratio Microsoft's extended window.screen does not use any existing standards: http://msdn.microsoft.com/en-us/library/ms535868(v=vs.85).aspx Internally, to trusted scripts, Mozilla exposes window.screenPixelsPerCSSPixel: https://developer.mozilla.org/en/NsIDOMWindowUtils I'm all for standardization here, but like other UI items, Mozilla has as a policy, obfuscated their access. As CSS selectors are working in FF4, and WebKit supports a similar selector that seems a good place for consensus. Canvas has been in for some five years now, and this issue has still not been addressed. I'm a bit frustrated, as it truly is a matter of exposing a single floating point value to the scripting environment. The consensus response at whatwg seems to be that the value should never be exposed to the scripting environment [though the css selector inadvertently does so], and that in the long-term, the resolution will be managed by the UA/implementation. Again.. this issue could have been fixed five years ago. I'd like to see it addressed this year. My current webkit hack will not work in the long term. IE9 [intentionally] and FF4 [inadvertently] expose the value I need. Let's do something for WebKit. I'm fine with: window.webkitPixelRatio, or any other manner to address this accessibility issue in the short term. -Charles ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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 ch...@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@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 ﹆﹆﹆
___
webkit-dev mailing list
webkit-dev@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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 Pritchardch...@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@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
___
webkit-dev mailing list
webkit-dev@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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. Cheers, -- 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 ﹆﹆﹆ ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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) ? Well the value doesn't change with zooming on neither Safari nor Chrome. I am not sure about the Kindle either; I'm not even sure what port it uses. 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. This is not now WebKit ports currently work. For me the 'device' part of the name also makes it feel like a static value. Whether this should be changed or whether we should add a way to get access to the user scale (ie something like -webkit-page-scale), I don't know. Maybe Hyatt has some input on this? Microsoft has exposed the values through window.screen. Do you have a link to some documentation for this? Cheers, -- 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 ﹆﹆﹆ ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
In the future? On Mar 4, 2011, at 8:51 AM, Oliver Hunt oli...@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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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 oli...@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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
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. Kenneth On Fri, Mar 4, 2011 at 8:11 PM, Oliver Hunt oli...@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 oli...@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@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 ﹆﹆﹆ ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
On Mar 4, 2011, at 11:24 AM, Kenneth Rohde Christiansen wrote: 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. There's a problem with that, which is that the author can assume (possibly erroneously) that device-pixel-ratio doesn't change for the life of the page. However, the zoom level can change often, and there's no notification that the author can register for that will tell them when the zoom level changes, and thus when they'll need to redraw their canvas contents. Simon ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
Hi Simon, I guess you could use the media query listener defined in http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface We support that on trunk now. This of course means that we will need to reevaluate the CSS when a pinch zoom ends, which we might be doing already given media queries such as @media all and (min-width: 200px). Cheers Kenneth On Fri, Mar 4, 2011 at 8:47 PM, Simon Fraser simon.fra...@apple.com wrote: On Mar 4, 2011, at 11:24 AM, Kenneth Rohde Christiansen wrote: 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. There's a problem with that, which is that the author can assume (possibly erroneously) that device-pixel-ratio doesn't change for the life of the page. However, the zoom level can change often, and there's no notification that the author can register for that will tell them when the zoom level changes, and thus when they'll need to redraw their canvas contents. Simon -- 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 ﹆﹆﹆ ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
I guess that is not even possible, as I would need to subscribe to something like (-min-webkit-device-pixel-ratio: 1.0) and will only be notified in case the evaluation of that exact expression changes. Maybe that spec is lacking a way to subscribe to arbitrary changes in say device-pixel-ratio. It does feel a bit expensive, but then again we are only reevaluation after pinch end, so I guess that would be fully OK. Kenneth On Fri, Mar 4, 2011 at 9:02 PM, Kenneth Rohde Christiansen kenneth.christian...@gmail.com wrote: Hi Simon, I guess you could use the media query listener defined in http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface We support that on trunk now. This of course means that we will need to reevaluate the CSS when a pinch zoom ends, which we might be doing already given media queries such as @media all and (min-width: 200px). Cheers Kenneth On Fri, Mar 4, 2011 at 8:47 PM, Simon Fraser simon.fra...@apple.com wrote: On Mar 4, 2011, at 11:24 AM, Kenneth Rohde Christiansen wrote: 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. There's a problem with that, which is that the author can assume (possibly erroneously) that device-pixel-ratio doesn't change for the life of the page. However, the zoom level can change often, and there's no notification that the author can register for that will tell them when the zoom level changes, and thus when they'll need to redraw their canvas contents. Simon -- 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 ﹆﹆﹆ -- 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 ﹆﹆﹆ ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Canvas backing resolution
We do receive a resize event when zoom happens. That's what I'm currently hooked into. On Mar 4, 2011, at 12:29 PM, Kenneth Rohde Christiansen kenneth.christian...@gmail.com wrote: I guess that is not even possible, as I would need to subscribe to something like (-min-webkit-device-pixel-ratio: 1.0) and will only be notified in case the evaluation of that exact expression changes. Maybe that spec is lacking a way to subscribe to arbitrary changes in say device-pixel-ratio. It does feel a bit expensive, but then again we are only reevaluation after pinch end, so I guess that would be fully OK. Kenneth On Fri, Mar 4, 2011 at 9:02 PM, Kenneth Rohde Christiansen kenneth.christian...@gmail.com wrote: Hi Simon, I guess you could use the media query listener defined in http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface We support that on trunk now. This of course means that we will need to reevaluate the CSS when a pinch zoom ends, which we might be doing already given media queries such as @media all and (min-width: 200px). Cheers Kenneth On Fri, Mar 4, 2011 at 8:47 PM, Simon Fraser simon.fra...@apple.com wrote: On Mar 4, 2011, at 11:24 AM, Kenneth Rohde Christiansen wrote: 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. There's a problem with that, which is that the author can assume (possibly erroneously) that device-pixel-ratio doesn't change for the life of the page. However, the zoom level can change often, and there's no notification that the author can register for that will tell them when the zoom level changes, and thus when they'll need to redraw their canvas contents. Simon -- 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 ﹆﹆﹆ -- 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 ﹆﹆﹆ ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
