HTML
<input type="hidden" name="base64" value="" id="base64">
<div id="signature-pad" class="signature-pad" >
<label class="" for="">Firma:</label>
<div class="signature-pad--body">
<canvas style="width: 640px; height: 420px; border: 1px black solid; " id="canvas"></canvas>
</div>
</div>
<button id="borrar">Borrar</button>
JS
document.getElementById('form').addEventListener("submit", function(e)
{
var ctx = document.getElementById("canvas").getContext("2d");
var image = ctx.toDataURL("image/png"); // Agregar "image/png" aquí
document.getElementById('base64').value = "data:image/png;" + image; // Agregar "data:image/png;" aquí
}, false);
document.getElementById('borrar').addEventListener("click", function(e){
e.preventDefault();
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('base64').value = '';
}, false);
if(document.getElementById('base64').value == ''){
alert("No hay firma");
}
<input type="hidden" name="base64" value="" id="base64">
<div id="signature-pad" class="signature-pad" >
<label class="" for="">Firma:</label>
<div class="signature-pad--body">
<canvas style="width: 640px; height: 420px; border: 1px black solid; " id="canvas"></canvas>
</div>
</div>
<button id="borrar">Borrar</button>
document.getElementById('form').addEventListener("submit", function(e){
var ctx = document.getElementById("canvas").getContext("2d");
var image = ctx.toDataURL("image/png"); // Agregar "image/png" aquí
document.getElementById('base64').value = "data:image/png;" + image; // Agregar "data:image/png;" aquí
}, false);
document.getElementById('borrar').addEventListener("click", function(e){
e.preventDefault();
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('base64').value = '';
}, false);
if(document.getElementById('base64').value == ''){
alert("No hay firma");
}