How to show Image coordinates x,y,z as a new image in a div on click button?

I am using selectareas.js to select some parts of the image with mouse event and getting coordinates x,y,z of the image, as I am selecting multiple areas of the image, all the values are printing/console in my browser correctly.

Now I am trying to Show all those selected coordinates of image areas as a new image in a different canvas/div on a button click event.

So technically when I am selecting 2,3 or 4 areas all coordinates values prints like this in an array

 0: {id: 0, x: 10, y: 20, z: 0, height: 100,width: 60}
 1: {id: 1, x: 159.5, y: 286, z: 0, height: 73,width: 220}
 2: {id: 2, x: 464.5, y: 300, z: 100, height: 117,width: 221}

Now I am trying to figure out how to show these coordinates as a different new image on my
page or downloads all as a new image by converting into base64.

HTML-

<div class="image-decorator">
  <img alt="Image principale" id="example" src="example.jpg" />
</div>
  <table>
    <tr>
     <td class="actions">
      <input type="button" id="btnView" value="Display areas" class="actionOn" />
     <td>
    <div id="output" class='output'> </div>
   </td>
  </tr>
 </table>

</div>

JQUERY:

      $(document).ready(function () {
            $('img#example').selectAreas({
                minSize: [10, 10],
                onChanged: debugQtyAreas,
                width: 1000
            });
            $('#btnView').click(function () {
                var areas = $('img#example').selectAreas('areas');
                displayAreas(areas);
            });
    });