W3C home > Mailing lists > Public > whatwg@whatwg.org > September 2009

[whatwg] Any chance for Double Buffering in the <canvas>?

From: Marius Gundersen <gundersen@gmail.com>
Date: Sat, 5 Sep 2009 16:39:55 +1000
Message-ID: <45f4181c0909042339v105bb7adv21bbeb924e0af4be@mail.gmail.com>
I've been playing around with the canvas element, making a 3D engine. It
works, but is incredibly slow. Part of the reason is probably that the
browser renders the canvas everytime I draw something to it. In a 3D engine,
as well as a game engine, the entire canvas is erased and redrawn several
times a second, and only at the end of each frame does it need to be
rendered to the screen.

This could be solved with a double buffer, and an explicit redraw() function
called at the end of each frame. for example:

function render(){
  ctx.clearRect(0, 0, width, height);
  drawSpaceShip(ctx);
  for(var i=0; i<spaceInvaders.length; i++){
    drawSpaceInvader(spaceInvaders[i], ctx);
  }
  ctx.repaint();
}

Of course this is not always desirable. The context2D could therefore have a
flag which turns on and off double buffering. Set to true, the canvas is
only redrawn when the repaint function is called, set to false, it will
repaint every time the user calls a function that draws to the canvas
(drawImage, fillRect, stroke... etc).

So, to sum up, this is what should be added to the context2D object:

attribute boolean doubleBuffer; //(default false)
void repaint(); //repaints the entire canvas. Only used if doubleBuffer is
true




Marius Gundersen
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20090905/f34eaa2e/attachment.htm>
Received on Friday, 4 September 2009 23:39:55 UTC

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:08:52 UTC