Canvas drawImage using data URL

Question

I'll start with the script:

  function saveInstance() {
   _savedInstance = document.getElementById('canvasID').toDataURL();
  }
  function restoreInstance() {
   ctx.drawImage(_savedInstance,0,0);
  }

The purpose is to save an instance of the canvas and re-apply it later [Similar to how ctx.save() saves the style and transformations].

However, I got the error that says incompatible types (Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17). Is there any canvas method that will allow me to use the data URL string to re-draw the instance?

**If there's a better way to implement this save/restore idea I have, that'd also be much appreciated.

-Firstmate

Answer 1

Yes, you can create an image element with its source as _savedInstance and then draw it to the canvas.

var img = new Image();
img.src = _savedInstance;
ctx.drawImage(img,0,0);