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

pixl coder · Accepted Answer · 2010-07-31 22:05:38Z

18

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);

answered Jul 31, 2010 at 22:05

pixl coder

6285 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

peol Over a year ago

Yes, you can also draw from a canvas/video element as well, see the spec here: whatwg.org/specs/web-apps/current-work/multipage/…

Firstmate Over a year ago

Worked like a charm! And thanks for the link Peol, that comes in handy for another part of the project XD

Vanuan Over a year ago

See also this issue in Chrome: code.google.com/p/chromium/issues/detail?id=57941

T.Ho Over a year ago

@Vanuan, how do you overcome the issue with the image not loading immediately if your method to load the image need to be blocking?

Collectives™ on Stack Overflow

Canvas drawImage using data URL

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related