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
– Shakespeare, Commented Apr 8, 2016 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: <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> And yes, console.log is showing the c variable — Sarang
– Sarang, Commented Apr 9, 2016 at 4:57
Possible duplicate of clearRect function doesn't clear the canvas — Nickolay
– Nickolay, Commented Apr 9, 2016 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
– Nickolay, Commented Apr 9, 2016 at 11:09

Nickolay · Accepted Answer · 2016-04-09 11:20:14Z

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 9, 2016 at 11:20

answered Apr 9, 2016 at 11:08

Nickolay

32.5k13 gold badges111 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shakespeare · Accepted Answer · 2016-04-08 16:23:52Z

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 8, 2016 at 16:23

Shakespeare

1,2869 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related