Does Canvas redraw itself every time anything changes?

Question

I have done some research on how canvas works. It is supposed to be "immediate mode" means that it does not remember what its drawing looks like, only the bitmap remains everytime anything changes.

This seems to suggest that canvas does not redraw itself on change.
However, when I tested canvas on iPad (basically I keep drawing parallel lines on the canvas), the frame rate degrades rapidly when there are more lines on the canvas. Lines are drawn more slowly and in a more jumpy way.

Does this mean canvas actually have to draw the whole thing on change? Or there is other reason for this change in performance?

Answer 1

The HTML canvas remembers the final state of pixels after each stroke/fill call is made. It never redraws itself. (The web browser may need to re-blit portions of the final image to the screen, for example if another HTML object is moved over the canvas and then away again, but this is not the same as re-issuing the drawing commands.

The context always remembers its current state, including any path that you have been accumulating. It is probable that you are (accidentally) not clearing your path between 'refreshes', and so on the first frame you are drawing one line, on the second frame two lines, on the third frame three lines, and so forth. (Are you calling ctx.closePath() and ctx.beginPath()? Are you clearing the canvas between drawings?)

Here's an example showing that the canvas does not redraw itself. Even at tens of thousands of lines I see the same frame rate as with hundreds of lines (capped at 200fps on Chrome, ~240fps on Firefox 8.0, when drawing 10 lines per frame).

var lastFrame = new Date, avgFrameMS=5, lines=0;
function drawLine(){
  ctx.beginPath();
  ctx.moveTo(Math.random()*w,Math.random()*h);
  ctx.lineTo(Math.random()*w,Math.random()*h);
  ctx.closePath();
  ctx.stroke();
  var now = new Date;
  var frameTime = now - lastFrame;
  avgFrameMS += (frameTime-avgFrameMS)/20;
  lastFrame = now;
  setTimeout(drawLine,1);
  lines++;
}
drawLine();

// Show the stats infrequently
setInterval(function(){
  fps.innerHTML = (1000/avgFrameMS).toFixed(1);
  l.innerHTML = lines;
},1000);

Seen in action: http://phrogz.net/tmp/canvas_refresh_rate.html

For more feedback on what your code is actually doing versus what you suspect it is doing, share your test case with us.