Как создать холст в jQuery и отобразить его в нескольких областях

Question

Почему, если я пытаюсь отобразить один и тот же элемент canvas в нескольких областях в dom, используя. html (), будет выведен только последний элемент. Взгляните на следующий пример, я создаю элемент canvas и сохраняю его внутри переменной для вывода в два элемента dom, используя. html (), но первый элемент пуст. Почему это происходит?

jQuery(document).ready(function(){
    var c = $('<canvas />');
    c[0].height = 200;
    c[0].width = 200;
    var ctx = c[0].getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

    $('.canvas_one').html(c);
    $('.canvas_two').html(c);
});

.canvas_one{
    background-color: blue;
    min-height: 10px;
}

.canvas_two{
    background-color: red;
    min-height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas_one"></div>
<div class="canvas_two"></div>

Answer 1

Проблема в том, что c ссылается только на один и тот же экземпляр canvas. Поэтому, когда вы включаете его во второй html() вызов, вы фактически перемещаете из исходного положения в цель.

Если вы хотите создать новый экземпляр canvas, вы можете использовать clone() для его создания, например:

$('.canvas_two').html(c.clone());

jQuery(document).ready(function() {
  var c = $('<canvas />');
  c[0].height = 200;
  c[0].width = 200;
  var ctx = c[0].getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();

  $('.canvas_one').html(c);
  $('.canvas_two').html(c.clone());
});

.canvas_one {
  background-color: blue;
  min-height: 10px;
}

.canvas_two {
  background-color: red;
  min-height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas_one"></div>
<div class="canvas_two"></div>