can't draw signature on the canvas

May 11, 2022

i followd this code: https://codepen.io/BigLeeBrink/pen/ZdvLLE but why can’t i draw on the canvas? can anybody help me?
this is my code:

<canvas id="signature" width="450" height="150" style="border: 1px solid #ddd;"></canvas>
         <script>
         jQuery(document).ready(function($){
    
    var canvas = document.getElementById("signature");
    var signaturePad = new SignaturePad(canvas);
    
    $('#clear-signature').on('click', function(){
        signaturePad.clear();
    });
    
});
</script>

>Solution :

the only possible explanation is you havent imported the jquery and signature_pad library into your code. after doing so the code works as expected.

jQuery(document).ready(function($){
    
    var canvas = document.getElementById("signature");
    var signaturePad = new SignaturePad(canvas);
    
    $('#clear-signature').on('click', function(){
        signaturePad.clear();
    });
    
});

<canvas id="signature" width="450" height="150" style="border: 1px solid #ddd;"></canvas>
<br>
<button id="clear-signature">Clear</button>
<script src = "https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>