Home/ Questions/Q 6653153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:14:01+00:00

Hello could somebody tell me wath is wrong with my code. When i do

  • 0

Hello could somebody tell me wath is wrong with my code. When i do the clear rect, it’s doesn’t work.

I just try to move the ball in the canvas. Actually my ball leave a mark. This kind of line is leave.
enter image description here

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="_js/jquery1.6.js" type="text/jscript"></script> 
    </head>
    <body>    
        <canvas id="dropBall" width="400" height="400"></canvas>
     <script>
         var dropBall = $("#dropBall")[0];
         var dropContext = dropBall.getContext("2d");
dropContext.fillStyle = "green";
         var ballX = 200;
         var ballY = 200;
         function activeBall() {
             dropContext.clearRect(0, 0, dropBall.width, dropBall.height);
             dropContext.arc(ballX, ballY, 10, 2 * Math.PI, 0, true);
             dropContext.fill();

             ballY--;
             ballX++;
             var time = 100;
             setTimeout("activeBall()", time);
         }
         activeBall();
    </script>
    </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Shouldn’t it be:

    dropContext.clearRect(ballX,ballY,dropBall.width,dropBall.height);

    or am I misunderstanding something?

    If you do it the other way around, then the only rectangle getting cleared is the square from (0,0) to (width of ball,height of ball).

    EDIT:
    It actually might be 

    dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);

    If your ball is centered at ballX.

    EDIT EDIT:

    I fixed it for you:

    function activeBall() {
         dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
         dropContext.beginPath();
         dropContext.arc(ballX, ballY, 10, 2 * Math.PI, 0, true);
         dropContext.fill();

         ballY--;
         ballX++;
         var time = 100;
         setTimeout("activeBall()", time);
     }
    1. You were clearing a rectangle on the top-left corner of your canvas.
    2. You have to call beginPath() and then do all your drawing work. Clearing has to be called outside of beginPath() and fill().

    The specific lines are:

             dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
         dropContext.beginPath();
    • 0