Почему не работает клонирование canvas?

Question

[lolka02]

Пытаюсь клонировать созданный канвас, что то не получается

<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/
Что не так ?

Comments

[Hyubert]

А что за метод clone? Я такое не знаю

[lolka02]

Hyubert, https://api.jquery.com/clone/ в jquery имеется ввиду

[Hyubert]

lolka02, это я понял, но канвас ищется средствами ванильного дж и методы у него из ванильного. 2 варианта -
1. вместо -
var canvas = document.getElementById('myCanvas');
это -
var canvas = $('myCanavs')
2. вместо -
var clone = canvas.clone();
это -
var clone = canvas.cloneNode();

И у вас jquery к примеру не подключен, видаст ошибку на $

[lolka02]

https://jsfiddle.net/akhur/smypaf74/15/ вот так вроде работает

Answer 1

[0xD34F]

Что не так ?

Да всё не так.

Что за clone? - у DOM-узлов такого метода нет. Есть cloneNode. Или используйте jquery (судя по тому, что контекст вы пытаетесь получить у clone[0], так и предполагалось), там clone есть: $(canvas).clone().

Копировать содержимое оригинала вы пытаетесь до того, как оно вообще будет загружено. Выполняйте копирование в onload.

Копируете непонятно откуда:

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

Опять же - либо canvas = $('#myCanvas'), либо drawImage(canvas,.

UPD. Должно было быть так?

Comments

[lolka02]

ну да примерно так, а как на jquery клоинвароть?
вот этот момент

var clone = canvas.cloneNode();
  clone.getContext('2d').drawImage(canvas, 0, 0);

так не работает, пустой

var clone = canvas.clone();
        clone[0].getContext('2d').drawImage(canvas[0], 0, 0);

canvas в этом случае $('#myCanvas')

[0xD34F]

lolka02,

так не работает

работает

[lolka02]

https://jsfiddle.net/akhur/smypaf74/15/ решил вроде

Answer 2

[Дмитрий Беляев]

А Вы в консоль заглядывать пробовали?
canvas.clone is undefined