On Feb 3, 2010, at 7:00 PM, Tim Hutt wrote:

> On 3 February 2010 23:16, Boris Zbarsky <bzbar...@mit.edu> wrote:
>> On 2/3/10 6:12 PM, Tim Hutt wrote:
>>> Ah yes that works nicely
> Hmm maybe I spoke too soon. The interaction of the CSS size and the
> canvas.width/height is confounding! It seems if you set a CSS width
> of, say 80% then that is that and you are stuck with it. Unfortunately
> it doesn't round to the nearest pixel!
> I have created a test case here:
> http://concentriclivers.com/canvas.html (the source is nicely
> formatted and very short)
> If anyone can get it to work as described on that page, then thank
> you! Otherwise I think things need to be changed to make it possible.

That example:
  * Works for me in Chrome (5.0.307.1 dev, all browsers listed are on Mac OS X 
  * Works in Safari (WebKit nightly 6531.21.10, r54122) except for when you 
cause a scroll bar to appear or disappear by resizing; then you get a moiré 
pattern in the vertical stripes until you resize again. It appears that you get 
the resize event before the scrollbar appears, so the scrollbar appearing 
causes the canvas to scale down without sending a resize event allowing the 
canvas to redraw.
  * Doesn't work in Firefox (3.6). At most sizes, you get grey lines, due to 
the non-integral width; only occasionally does it look correct. Also, the 
canvas always resizes to a square; does Firefox try to preserve the aspect 
ratio when scaling a canvas in one dimension only?
  * Fails badly in Opera (10.10). It fails to redraw because "width" and 
"height" aren't defined on the BoundingClientRect; just left, right, top, and 
bottom. For some reason it also ignores the 500px height of the canvas given in 
the HTML, instead using the default of 300x150, with the width overridden to 

I think the most reasonable approach would be to say that the 
getBoundingClientRect().width or height is rounded to the nearest pixel. Boxes 
are displayed rounded to the nearest pixel, with no fractional pixels being 
drawn, right? Why would they report a width or height that is different than 
how they are displayed? All browsers that I've tested (the ones listed above, 
so not IE) report integral values for getBoundingClientRect().width and height 
(or for left and right in the case of Opera, which doesn't support width and 

-- Brian

Reply via email to