Why i can't replace two canvases in place ? [ SOLVED but incomplete ]

1

pen: [ http://codepen.io/ustvarno/pen/oLALQX?editors=0010 ]

i’m using this method, and also tried with html() for replacing…

      var $first = $(selected);
      var $second = $(e.target);
    
      var cloneFirst = $first.clone();
      var cloneSecond = $second.clone();
    
      $first.replaceWith(cloneSecond);
      $second.replaceWith(cloneFirst);

next i’ll try to redraw from one canvas to another and vice versa…
but why this doesn’t work, u’ll see that id is replaced, and there is frame ( border ) for node, but content inside not…

EDIT: i solved with:

  var width  = selected.width, height = selected.height;
  var tCanvas = $('<canvas />')
                    .attr({
                      
                      width: width,
                      height: height
                      
                    }).get(0);

  tCanvas.getContext('2d').drawImage(selected, 0, 0);
  selected.getContext('2d').drawImage(e.target, 0, 0);
  e.target.getContext('2d').drawImage(tCanvas, 0, 0);

but still waiting answer…