How to get all the canvases of an html view to save the base64 image

I have the following html with different canvas

<div style="float:right;">
<button type="button" id="btn-save-image" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-floppy-saved" aria-hidden="true">
</span>
</button>
</div>

<div id="form-render">

<div class="clearCanvas" style="position:absolute;right:5px;top:0px; width:30px;height:30px;background-image: url(/Images/btn_delete_white.png);background-size: contain;z-index: 5;border-radius: 8px;">
<canvas class="input-details" name="' + ContainerID + '" data-field="TIssSignatureCapture-' + ControlId + '"  id="canvas_' + ContainerID + '" width="' + w + '" height="' + h + '">
</canvas>
</div>

<div class="clearCanvas" style="position:absolute;right:5px;top:0px;width:30px;height:30px;background-image: url(/Images/btn_delete_white.png);background-size: contain;z-index: 5;border-radius: 8px;">
<canvas class="input-details" name="' + ContainerID + '" data-field="TIssSignatureCapture-' + ControlId + '" id="canvas_' + ContainerID + '" width="' + w + '" height="' + h + '">
</canvas>
</div>


<div class="clearCanvas" style="position:absolute;right:5px;top:0px;width:30px;height:30px;background-image: url(/Images/btn_delete_white.png);background-size: contain;z-index: 5;border-radius: 8px;">
<canvas class="input-details" name="' + ContainerID + '" data-field="TIssSignatureCapture-' + ControlId + '" id="canvas_' + ContainerID + '" width="' + w + '" height="' + h + '">
</canvas>
</div>

</div>

The idea is to get all the canvas of the html to capture the Base64 image

I'm trying this with javascript but I have not managed, I have the idea of taking all the ids of the canvas for each one to get the base64 image but I have not popido do it, please can someone give me some idea ??.

 $('#btn-save-image').on('click', function (e) {               
 var canvas = document.getElementById('canvas_' + ControlId);
 var val = canvas.toDataURL("image/png");   
)};