Q:

How to Create a Canvas in jQuery and Display it in Multiple Areas

Why is it that if I try display the same canvas element in multiple areas in the dom using .html() only the last one will be output. Have a look at the following example, I create a canvas element and store it inside a variable to be output to two dom elements using .html() but the first element is blank. Why is this happening? 

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>

A:

The issue is because c only ever references the same, single, canvas instance. Therefore when you include it in the second html() call you're effectively moving it from its original location to the target. 
If you want to create a new canvas instance then you can use clone() to create it, like this:
$('.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>

