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.<br>
<br>This could be solved with a double buffer, and an explicit redraw() function called at the end of each frame. for example:<br><br>function render(){<br>  ctx.clearRect(0, 0, width, height);<br>  drawSpaceShip(ctx);<br>
  for(var i=0; i<spaceInvaders.length; i++){<br>    drawSpaceInvader(spaceInvaders[i], ctx);<br>  }<br>  ctx.repaint();<br>}<br><br>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). <br>
<br>So, to sum up, this is what should be added to the context2D object:<br><br>attribute boolean doubleBuffer; //(default false)<br>void repaint(); //repaints the entire canvas. Only used if doubleBuffer is true<br><br><br>
<br><br>Marius Gundersen<br>