1

I have two html files, say 1.html and 2.html with 1.js and 2.js referenced javascripts. In 1.html I have a Canvas object with drag and drop functionality, so that i use drawImage method for adding additional images to the canvas. When I am finished with adding images on 1.html, i save the canvas to the localStorage. Shortly it would be like:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height);

localStorage.setItem("context1", ctx);  // Unsure if i should save context or canvas

Now, in 2.html, i want to retrieve saved in 1.html canvas and set/apply it on the 1.html, so here i do like:

var savedContext = localStorage.getItem("context1");

var canvas1 = document.getElementById('canvas1');
var context1 = savedContext;

And I am not getting any results, I don't even know if it is possible at all to pass Canvas like that with all the images that were drawn on it, or maybe there is another way to do so

Boris Mocialov
  • 3,439
  • 2
  • 28
  • 55

2 Answers2

1

You might be able to do what you are wanting by saving a data url rather than trying to save the canvas or context:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height);

localStorage.setItem("imageData", canvas.toDataUrl());

And restore it later:

var img = document.createElement('img');
img.src = localStorage.getItem("imageData");

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(img, x, y, img.width, img.height);

You may also have to wait for the "onload" event to fire on the img before you can draw it on the canvas, but I'm not sure.

Prestaul
  • 83,552
  • 10
  • 84
  • 84
  • in this case i retrieve it as image, but in my case I would like to know also locations (x, y) of the images that were drawn on the canvas when operated by 1.html. If i save and retrieve it as image, then i will not have any information about the other objects on the canvas – Boris Mocialov Mar 18 '12 at 22:59
  • 1
    There are no "objects on the canvas"... A canvas element is really only a drawing state and a collection of pixels. There is not way to tell what is drawn or where, even if you do everything on a single page... – Prestaul Mar 18 '12 at 23:04
  • You could always store the locations of the images into a different object as you draw them and then store that object in addition to the data url... – Prestaul Mar 18 '12 at 23:05
  • you say that there is no way to tell what is drawn and where. But i specify location when using drawImage method.. I could then probably save as image and pass location parameters separately – Boris Mocialov Mar 18 '12 at 23:07
1

I do not think this is the right method to do it. Reason : The localstorage API keeps only string key-value pairs. So you need a string representation of your canvas element.

Look here :

Javascript Canvas Serialization/Deserialization?

Community
  • 1
  • 1
  • I have answered to Prestaul that I would like to keep locations of images on the canvas. This is needed, because in 2.html these images will have some properties associated with their (x, y) location – Boris Mocialov Mar 18 '12 at 23:04