Почему не работает клонирование 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 есть.

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

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

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

Опять же - или получайте элемент через jquery, или уберите [0].

Исправляем:

const canvas = document.querySelector('#myCanvas');
const image = Object.assign(new Image, {
  onload() {
    canvas.getContext('2d').drawImage(this, 0, 0, 300, 300);
    const clone = canvas.cloneNode();
    clone.getContext('2d').drawImage(canvas, 0, 0);
    document.querySelector('#target').append(clone);
  },
  src: 'https://www.photographyatthesummit.com/wp-content/uploads/2013/03/p-nature43-300x300.jpg',
});

или

const $canvas = $('#myCanvas');
const $image = $('<img>')
  .on('load', function() {
    $canvas[0].getContext('2d').drawImage(this, 0, 0, 300, 300);
    const $clone = $canvas.clone();
    $clone[0].getContext('2d').drawImage($canvas[0], 0, 0);
    $('#target').append($clone);
  })
  .prop('src', 'https://www.photographyatthesummit.com/wp-content/uploads/2013/03/p-nature43-300x300.jpg');

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]

а как на jquery клоинвароть?

Ответ обновил.

[lolka02]

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

Answer 2

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

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