How to create a single PNG img from a HTML5 Canvas?

I'm developing a website where users can select multiple artworks and buy them for preview.

I decided to place those selected artwork images into a container ("Appended") and then move them into a canvas ("Canvas"). So far so good.

But the problem i'm facing is that i cannot convert that canvas to a single PNG image ("Result"). I need to do that in order to place that image in the shopping cart.

everything except the ("Result") part works great (i think).

Please let me know what i can do to fix this. Thank you!

Here is a fiddle https://jsfiddle.net/alihoo/f6Le35m9/10/

And here are the reduced codes:

HTML

<p>Images</p>
<label class="image">
  <input type="checkbox" name="1">
  <img src="https://via.placeholder.com/150/5E2BFF/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="2">
  <img src="https://via.placeholder.com/150/49D49D/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="3">
  <img src="https://via.placeholder.com/150/F9C80E/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="4">
  <img src="https://via.placeholder.com/150/1098F7/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="5">
  <img src="https://via.placeholder.com/150/ED254E/FFFFFF?">
</label>

<div class="container">
  <div><p>Append</p><div class="appended"></div></div>
  <div><p>Canvas</p><canvas id="canvas" width="100" height="100"></canvas></div>
  <div><p>Result</p><div class="result"></div></div>
</div>

CSS

img {
  width: 50px;
  height: 50px;
}

.container {
  width: 388px;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.appended {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  background: #111111;
}

.appended img {
  width: 50px;
  height: 50px;
  display: block;
}

#canvas {
  background: #111111;
}

.result {
  width: 100px;
  height: 100px;
  background: #111111;
}

Jquery/Javascript

$("input:checkbox").on("change", function() {
    
  // Checkboxes
  if ($('input[type="checkbox"]:checked').length >= 4) {
    $('input[type="checkbox"]').not(':checked').prop('disabled', true);
  } else {
    $('input[type="checkbox"]').not(':checked').prop('disabled', false);
  }

  if ($(this).prop('checked') == true) {
    $(this).siblings("img").clone().appendTo(".appended").addClass("new" + $(this).attr('name'));
    $(".new" + $(this).attr('name') + " input").remove();
  }
  if ($(this).prop('checked') == false) {
    $(".new" + $(this).attr('name')).remove();
  }
    
  // Canvas
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var img1 = document.querySelector(".appended img:nth-child(1)");
  var img2 = document.querySelector(".appended img:nth-child(2)");
  var img3 = document.querySelector(".appended img:nth-child(3)");
  var img4 = document.querySelector(".appended img:nth-child(4)");
  canvas.width = 100;
  canvas.height = 100;
  ctx.drawImage(img1, 0, 0, 50, 50);
  ctx.drawImage(img2, 50, 0, 50, 50);
  ctx.drawImage(img3, 0, 50, 50, 50);
  ctx.drawImage(img4, 50, 50, 50, 50);
  
  // Result
  var target = new Image();
  target.src = canvas.toDataURL('image/png');
  $('.result').append(target);

});