Hovering the mouse over canvas making the image reappear

Question

I have a draw and clear button on my page. when the user clicks on the draw button, they can draw an image on the canvas and when they click on clear button, the canvas clears out, but somehow if I hover the mouse over the canvas, the image that was cleared reappears again. Below is my web code and jquery/javascript code.

 function EraseCanvas()
        {
            document.getElementById('SignatureField').value='';
            
           var canvas1 = document.getElementById("colors_sketch");
        
           var context = canvas1.getContext("2d");

            context.clearRect(0, 0, 500, 150);
           
            
        }
        
            $(function () {
              $('[id*=btnDraw]').on('click', function () {
              $('[id*=dvSignature]').attr('style', 'display:block;');
  
  
                $('[id*=colors_sketch]').sketch();
                $(".tools a").eq(0).attr("style", "color:#000");
                $(".tools a").click(function () {
                    $(".tools a").removeAttr("style");
                    $(this).attr("style", "color:#000");
                });
            }
         });
});

below is the web code:

  <input id="btnDraw" type="button" value="Draw" /><br/>
    <input id="btnClear" type="button" value="Clear" onclick="EraseCanvas()" />
      <div id="dvSignature" style="display: none;text-align:center">
                <canvas  id="colors_sketch" width="500" height="150" style="border: 1px solid #ccc;"></canvas>
            </div>

These are the two JavaScript libraries, I am using:

<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>
 <script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.4/signature_pad.min.js></script>

Not sure, what am I doing wrong. I dont want the same image to reappear after the clear button is clicked.

FYI: the code in your question has a syntax error. – Michael M. Mar 28 '23 at 01:34 — Michael M., Mar 28 '23 at 01:34

score 2 · Accepted Answer · answered Mar 28 '23 at 02:22

According to this answer, you just change this:

var canvas1=document.getElementById("colors_sketch");
var context=canvas1.getContext("2d");
context.clearRect(0, 0, 500, 150);

to this:

$('[id*=colors_sketch]').sketch("actions", []);
$('[id*=colors_sketch]').sketch("redraw");

Because

This plugin stores all the drawing commands in an actions array

So you should empty that array instead of clear canvas on HTML. Full code:

function EraseCanvas() {
    document.getElementById('SignatureField').value='';
    //var canvas1=document.getElementById("colors_sketch");
    //var context=canvas1.getContext("2d");
    //context.clearRect(0, 0, 500, 150);
    
    $('[id*=colors_sketch]').sketch("actions", []);
    $('[id*=colors_sketch]').sketch("redraw");
}

$(function () {
    $('[id*=btnDraw]').on('click', function () {
        $('[id*=colors_sketch]').sketch();
        $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>
<script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.4/signature_pad.min.js></script>

<input id="btnDraw" type="button" value="Draw" /><br/>
<input id="btnClear" type="button" value="Clear" onclick="EraseCanvas()" />
<input id="SignatureField" />
<canvas id="colors_sketch" width="500" height="150" style="border: 1px solid #ccc;"></canvas>

Hovering the mouse over canvas making the image reappear

1 Answers1