[whatwg] Canvas size and double buffering.

[Brian Campbell]

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

> On 3 February 2010 23:16, Boris Zbarsky <bzbarsky at 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 10.6.2).
  * 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 80%.

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 height).

-- Brian