[whatwg] Canvas size and double buffering.

Tim Hutt tdhutt at gmail.com
Wed Feb 3 06:05:32 PST 2010

Hi, I've been trying to use the HTML5 canvas to implement a slippy
map. It works ( http://concentriclivers.com/ ), but there were a
couple of issues I had for which there seems to be no good solution.

1. You can only set the size exactly in pixels. It is very hard to get
a resizable canvas that fills the page. You *can* set the size in CSS,
but it doesn't work very well (e.g. using left,right-margin: auto; to
centre the canvas doesn't work. Also it scales the canvas rather than
resizes it.

2. There doesn't appear to be any kind of double buffering capability.
This is pretty critical for animations where you might need to clear
the canvas and then draw stuff. You currently get flickering if you

As for solutions I propose:

1. Allow width=20%, 3em, and so on. The pixel size is then decided by
the device, but it's very easy to query it in javascript (all the
examples I've seen do this anyway). CSS sizes should definitely resize
the canvas rather than scale it.

2. Add a .flipBuffers() method, and either make all canvases double
buffered, or add a 'doublebuffered' tag attribute (which would be more
backwards compatible).


More information about the whatwg mailing list