drawImage using toDataURL of an html5 canvas

Question

What I am doing now is the following:

I am storing the state of a canvas using the toDataURL method and I am also trying to draw it on a canvas using the drawImage method.

Here is a snippet:

var lastState = states[10]; //states is an array that saves all the toDataURL of the canvas
var permCtx = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
  permCtx.drawImage(img,0,0);
}
img.src=lastState;

I am getting the following error in the console:

414 (Request-URI Too Large)

Is there a way to draw an image on the canvas using only the toDataURL method?

(Or can you give us the contents of states[10] so we can see for ourselves?) — Simon Sarris, Apr 18 '11 at 02:30
My guess: perhaps this is IE8, which has a known 32kB limit. Relevant: http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations — Phrogz, Apr 18 '11 at 02:35

score 2 · Answer 1 · answered Apr 18 '11 at 02:30

The mechanism you have used should work; what OS/browser/version are you seeing this error with?

Anyhow, despite the fact that this should work, it is not the most efficient if you are constructing data URLs and then restoring them in the same session. Instead, I would suggest creating a new not-in-DOM canvas to store your state, and use that to draw to the main canvas:

var states = [];
function saveState(ctx){
  var c = document.createElement('canvas');
  c.width  = ctx.canvas.width;
  c.height = ctx.canvas.height;
  c.getContext('2d').drawImage(ctx.canvas,0,0);
  states.push(c);
  return c;
}

function restoreState(ctx,idx){
  var off = idx==null ? states.pop() : states[idx];
  ctx.drawImage(off,0,0);
}

drawImage using toDataURL of an html5 canvas

1 Answers1

Linked