Question

is there a way to pause / resume for HTML5 Canvas?

Say my code:

// Draw lines with decreasing widths
 for (i = 20; i > 0; i--)
 {
    var v=i*20
   ctx.strokeStyle = "rgb("+v+", "+v+", "+v+")";
   ctx.lineWidth = i;
   ctx.beginPath();
   ctx.moveTo(55, 20 + (20 - i) * 24);
   ctx.lineTo(335, 20 + (20 - i) * 24);
   ctx.stroke();
}

At the start of the code, I would like to Pause() meaning, i will tell the browser “ok you don’t really have to waste any resources doing any actual drawing right now”, i’m just gonna tell you the commands. Then after looping through i will call Resume() meaning “ok you can start drawing them now”

Btw does anyone know if there is a complete reference for the context object in javascript (I can’t find it in google nor MDC..)

Answer 1

Try to draw the lines offscreen instead of “pausing” the canvas: http://kaioa.com/node/103

It will have the same result.

var renderToCanvas = function (width, height, renderFunction) {
  var buffer = document.createElement('canvas');
  buffer.width = width;
  buffer.height = height;
  renderFunction(buffer.getContext('2d'));
  return buffer;
};

(code fragment taken from above mentioned web page)