context.clearRect(x,y,width,height) not working when used with single button

Question

I want to clear the canvas and then draw new shape on click of same button at once. "Draw shape" is the button I am using which draws shape of given parameters. Now when again I select some other shape without reloading the page, and click on the button again, it should clear existing shape and show only new one. But it is overwriting new shape over existing shape. Can somebody specify what wrong i am doing?

Code:

<!DOCTYPE html>
<html>
  <title>Blue Orchids School</title>
  <head align="centre"><b>Blue Orchids School</b></head>
  <body>
    <button onclick="draw()" type="submit">Draw shape</button><br><br>
    <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    <p id="details"></p>
    <script>
      function draw() {
        rendershape("Circle", 4, 22, 5, "Red")
        rendershape("Circle", 4, 220, 5, "Red")
      }
      function rendershape(shape, width, xcoordinate, ycoordinate, colour)
      {   
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.clearRect(0,0,c.width,c.height);
        
        //To draw a circle
        if(shape=='Circle'||shape=='circle')
        {
            ctx.lineWidth=width;
            ctx.arc(xcoordinate,ycoordinate,50,0,2*Math.PI);
            ctx.fillStyle= colour;
            ctx.fill();
            ctx.stroke();
        }

        document.getElementById("details").innerHTML += 'Shape: '  + shape + '<br>' + 'Colour : '+ colour + '<br>' +' X-coordinate: '+ xcoordinate + '<br>' +' Y-coordinate: '+ ycoordinate + '<br>' + ' Width: '+ width;
      }
    </script>
  </body>
</html>

Where is the canvas DOM element? It looks like you haven't included all your HTML code. Does the variable **c**, where you grab the canvas element, console log out correctly? — Shakespeare, Apr 08 '16 at 16:26
I have added it. While copy pasting code here, it ain't showing that, it should be in plase of "Your browser does not support the HTML5 canvas tag. " It is as: And yes, console.log is showing the c variable — Sarang, Apr 09 '16 at 04:57
Possible duplicate of [clearRect function doesn't clear the canvas](http://stackoverflow.com/questions/13435959/clearrect-function-doesnt-clear-the-canvas) — Nickolay, Apr 09 '16 at 11:05
In the future, please provide a minimal testcase that reproduces a problem (see my edit to your post). Most of the time I spent answering this was removing unneeded parts of the code. — Nickolay, Apr 09 '16 at 11:09

score 0 · Answer 1 · answered Apr 08 '16 at 16:23

0

Looks like a typo case.

ctx.clearRect(0,0,c.widht,c.height);

Change it to:

ctx.clearRect(0,0,c.width,c.height);

answered Apr 08 '16 at 16:23

Shakespeare

1,286
9
15

Nickolay · Accepted Answer · 2016-04-09T11:20:14.143

0

You need to add ctx.beginPath() after clearRect(). This is a good explanation: Why clearRect Might Not be Clearing the Canvas Pixels.

If we do not call beginPath() (and then preferably closing that using closePath()), then all the drawing commands called will stack up in the memory and every time stroke() or fill() is called, it’ll draw all the graphic paths.

edited Apr 09 '16 at 11:20

answered Apr 09 '16 at 11:08

Nickolay

31,095
13
107
185

context.clearRect(x,y,width,height) not working when used with single button

2 Answers2