clearing the canvas on click of button

Question

I am trying to clear the canvas when the "Eraser button is clicked. I wrote the JavaScript code, but somehow the canvas is not clearing. Below is my code:

  <input asp-for="SignatureField" type=" text" placeholder="Type Here" style="width: 500px; height: 200px;font-family:Journal;font-size:40px" /><br/>
<input id="btnClear" type="button" value="Eraser" onclick="EraseCanvas()" /><br/>
<canvas  id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc;"></canvas>

this is my JavaScript function to erase the content of both input box and Canvas:

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

        context.clear(0, 0, 500, 200);
       
        
    }

</script>

when I click the Erase button, the content of the input box are cleared, but canvas content do not get erased.

https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing — epascarello, Mar 27 '23 at 20:57

score 2 · Answer 1 · answered Mar 27 '23 at 20:55

2

Use context.clearRect(0, 0, 500, 200) instead of context.clear(0, 0, 500, 200).

I hope I've answered your question :)

answered Mar 27 '23 at 20:55

Eesa

54
5

clearing the canvas on click of button

1 Answers1