[whatwg] Canvas size and double buffering.
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
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
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
More information about the whatwg