How to check if a canvas is empty
In this tutorial, we will learn How to check if a canvas is empty. we will check how to check whether a Canvas is blank or not using JavaScript. When we implement a canvas first thing canvas is empty or not, so in this tutorial, we will learn if a canvas is empty and return an alert “Please enter signature”.
Why canvas check if empty?
In most cases, clients tell us we use a signature pad. and we check if the user enters a signature or not if the user does not enter the signature we tell him please enter your signature.
How to check if a canvas is empty
we use the toDataURL() function to check whether two canvas is the same or not. and also we check using SignaturePad to signaturePad.isEmpty() function.
Example 1
JavaScript Function isCanvasEmpty()
function isCanvasEmpty(canvas) {
const blankCanvas = document.createElement('canvas');
blankCanvas.width = canvas.width;
blankCanvas.height = canvas.height;
return canvas.toDataURL() === blankCanvas.toDataURL();
}Full code
<!DOCTYPE html>
<html>
<head>
<title>How to check if a canvas is empty</title>
</head>
<body>
<div>
<canvas id='canvasDiv' style='border:solid'></canvas>
<div style="padding-top:25px;">
<input type="button" value="Start Drawing" onclick="startDrawing();"/>
<input type="button" value="Verify Canvas" onclick="checkCanvas();"/>
</div>
<script type="text/javascript">
var canvas;
var twoDCanvas;
function startDrawing() {
canvas = document.getElementById('canvasDiv');
twoDCanvas = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (e) {
twoDCanvas.lineTo(e.pageX - canvas.parentElement.offsetLeft, e.pageY - canvas.parentElement.offsetTop);
twoDCanvas.stroke();
});
}
function checkCanvas() {
var canvas = document.getElementById('canvasDiv');
if (isCanvasEmpty(canvas)){
alert('Please enter signature!');
} else {
alert('Thank you!');
}
};
function isCanvasEmpty(canvas) {
const blankCanvas = document.createElement('canvas');
blankCanvas.width = canvas.width;
blankCanvas.height = canvas.height;
return canvas.toDataURL() === blankCanvas.toDataURL();
}
</script>
</div>
</body>
</html>Example 2
signaturePad.isEmpty()
<!DOCTYPE html>
<html>
<head>
<title>How to check if a canvas is empty</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<style>
.signature-pad-canvas-wrapper {
margin: 15px 0 0;
border: 1px solid #cbcbcb;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.signature-pad-canvas-wrapper::after {
content: 'Name';
border-top: 1px solid #cbcbcb;
color: #cbcbcb;
width: 100%;
margin: 0 15px;
display: inline-flex;
position: absolute;
bottom: 10px;
font-size: 13px;
z-index: -1;
}
</style>
</head>
<body>
<div class="signature-pad-canvas-wrapper">
<canvas id="signature-pad-canvas"></canvas>
<button onClick="submit()">Submit</button>
</div>
<script type="text/javascript">
var signaturePad;
jQuery(document).ready(function () {
var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
signaturePadCanvas.setAttribute("width", parentWidth);
signaturePad = new SignaturePad(signaturePadCanvas);
});
function submit() {
if (signaturePad.isEmpty()) {
alert("Please enter signature!");
} else {
alert("Thank you!");
}
}
</script>
</body>
</html>
