0

I have 2 div. Every div has a canvas element. At the beginning of my program I put an image on the canvas. The images are different. Then I try to swap the divs using 

    var contentofmyfirstdiv = $('#myfirstdiv').html();
    var contentofmyseconddiv = $('#myseconddiv').html();

    $('#myseconddiv').html(contentofmyfirstdiv);
    $('#myfirstdiv').html(contentofmyseconddiv)

;

All works except that every canvas is empty. It seems the "contentof..." didn't get the image from the canvas... Anyone knows how to swap the content of the canvas? I am using Firefox.

anraT
  • 523
  • 1
  • 8
  • 22
  • Is this inside a DOM ready event? – tymeJV Jun 24 '13 at 15:24
  • 1
    See this question on how to copy canvas contents: http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-canvas-locally – Castrohenge Jun 24 '13 at 15:27
  • Hi, for tymeJV: I have not ready event... for Castrohenge, it seems your link could be the answer what I looking for... I am checking.. thanks – anraT Jun 24 '13 at 15:34

2 Answers2

2

You are serializing to html and reparsing it, this is lossy operation. Instead you should operate on the live DOM tree directly:

var contentofmyfirstdiv = $('#myfirstdiv').children().detach();
var contentofmyseconddiv = $('#myseconddiv').children().detach();

$('#myseconddiv').append(contentofmyfirstdiv);
$('#myfirstdiv').append(contentofmyseconddiv)

Here's a demo that doesn't do justice but nevertheless http://jsfiddle.net/9JdqQ/

What's retained compared to serialization are unserializable attributes, event listeners, element data (canvas image etc)..

Esailija
  • 138,174
  • 23
  • 272
  • 326
1

If you are only using images to draw on the canvas there is really no need for the canvas - you could just use the images directly and swap those.

However, if you need to use canvas for other reasons you can extract the data directly from one, draw the other canvas to this, and then put the data from the first to the second.

This method shows a way that doesn't need DOM manipulation.

One option using a new canvas as a swap:

var temp = document.createElement('img');
temp.width = canvas1.width;
temp.height = canvas1.height;

//swap
var tempctx = temp.getContext('2d');
tempctx.drawImage(canvas1, 0, 0);

ctx1.drawImage(canvas2, 0, 0);
ctx2.drawImage(temp, 0, 0);

The other method using an image element as a swap:

var temp = canvas1.toDataURL();
ctx1.drawImage(canvas2, 0, 0);

var img = document.createElement('img');
img.onload = function() {ctx2.drawImage(this, 0, 0);}
img.src = temp;

The latter not optimal in speed as you need to compress and encode the data-uri.

Note that this example assume the images being of the same size. If the images are of different sizes you will need to handle this as well by setting canvas1 and 2 to the correct sizes after the image is copied to swap and before you redraw.

swap = canvas1
resize canvas1 = canvas2
draw canvas2 to canvas1
resize canvas2 = swap
draw swap to canvas2