Why doesn't canvas clone work?

Question

JavaScript

I'm trying to clone the created canvas, something doesn't work

<div class="small-container">
  <canvas id="myCanvas"></canvas>
</div>
<div id="target">

</div>

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, 300, 300);
      };
      imageObj.src = 'https://www.photographyatthesummit.com/wp-content/uploads/2013/03/p-nature43-300x300.jpg';

var clone = canvas.clone();
        var target = $("#target")
        clone[0].getContext('2d').drawImage(canvas[0],0,0, 300, 300);
        target.html(clone);

https://jsfiddle.net/akhur/smypaf74/7/
What's wrong?

Answer 1

What's wrong ?

Yes, it's not like that.
What is a clone? - DOM nodes don't have this method. There is a cloneNode. Or use jquery (judging by the fact that you are trying to get the context from clone[0], it was supposed to), clone is there: $(canvas).clone().
You are trying to copy the contents of the original before it is even downloaded. Do the copying in onload.
Copy from where:

canvas = document.getElementById('myCanvas');
<...>
drawImage(canvas[0],

Again , either or . UPD. Was it supposed to be like this ? canvas = $('#myCanvas')drawImage(canvas,

Answer 2

Have you tried looking at the console?
canvas.clone is undefined