Adding a reset button for my digital signature

Question

I am trying to add a reset button for my digital signature, if I sign and need to change my signature, I need to be able to reset the image to blank and start signing again, can you please explain how to?. Thank you.

  <div  class="m-signature-pad">
                    <div  class="m-signature-pad--body">
                        <img style="width: 260px;  height: 60px; margin:0px; padding: 0px; filter:sepia()(100%);" id="imagefetch1">
                    </div>
                </div>                  

                <script>
                function init() {
                    var docDescription = 'Please sign below';
                    var reqUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
                    docDescription = docDescription.replaceAll(' ', '%20');
                    reqUrl += '&ReceiptData=' + docDescription;
                    fetch(reqUrl)
                        .then(data => data.json())
                        .then(data => {
                            if (data.successful) {
                                $("#imagefetch1").attr("src","data:image/png;base64," + data.response.PNG);  
                                                                
                            }                                                           
                     
                        })
                        .catch(e => {
                            console.log('Error fetching image', e)
                        })  
                    } 
                                     
                </script> 

            <div class="form-row" > 
                <label for="signature" type="label"><strong>Signature</strong></label> 
                <input style="margin-left:90px; margin-top: 10px; border:transparent; width: 150px;" type="date" name="date" >
                <button style="position:relative;  top:-40px;" type="button" value="clear" id="clear">Reset</button> 
                <button style="position:relative;right:90px;top:-80px; line-height: 17px;" type="button" value="clear" id="clickto" onclick="init()">Click to Sign</button>                                                                          
            </div>

Answer 1

Solved my problem, I am new to JS and it might not be the most useful code but it did work for my purpose, if you can suggest a better way, I appreciate it. Thank you.

       <script>
                function init() {
                    var docDescription = 'Please sign below';
                    var reqUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
                    docDescription = docDescription.replaceAll(' ', '%20');
                    reqUrl += '&ReceiptData=' + docDescription;
                    fetch(reqUrl)
                        .then(data => data.json())
                        .then(data => {
                            if (data.successful) {
                                $("#imagefetch1").attr("src","data:image/png;base64," + data.response.PNG);                                                                      
                            }  
                            $('#imagefetch1').show();                                                      
                     
                        })
                        .catch(e => {
                            console.log('Error fetching image', e)
                        })
                    } 
                    function clear() {
                        $('#imagefetch1').hide();
                    
                    }
                                         
                </script>