Home/ Questions/Q 8987271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T21:44:56+00:00

I want to make an animation with javascript and html canvas, just the make

  • 0

I want to make an animation with javascript and html canvas, just the make a rectangle move from the top of the window to the bottom, I use canvas.clearRect to clear all the pixel on the canvas, but, it seems this function does not work, the previously drawing was still there. here is all the code

<!DOCTYPE HTML>
<html>
    <title>Jave script tetris by zdd</title>
    <head>
        <script>
            function point(x, y)
            {
                this.x = x;
                this.y = y;
            }

            function draw(timeDelta)
            {
                // Vertices to draw a square
                var v1 = new point(  0,   0);
                var v2 = new point(100,   0);
                var v3 = new point(100, 100);
                var v4 = new point(  0, 100);
                this.vertices = [v1, v2, v3, v4];

                // Get canvas context
                var c = document.getElementById("canvas");
                var cxt = c.getContext("2d");

                // Clear the canvas, this does not work?
                cxt.clearRect(0, 0, 800, 600);

                // Move the piece based on time elapsed, just simply increase the y-coordinate here
                for (var i = 0; i < this.vertices.length; ++i)
                {
                    this.vertices[i].y += timeDelta;
                }

                cxt.moveTo(this.vertices[0].x, this.vertices[0].y);
                for (var i = 1; i < this.vertices.length; ++i)
                {
                    cxt.lineTo(this.vertices[i].x, this.vertices[i].y);
                }
                cxt.lineTo(this.vertices[0].x, this.vertices[0].y);
                cxt.stroke();
            }

            var lastTime = Date.now();
            function mainLoop()
            {
                window.requestAnimationFrame = window.requestAnimationFrame || 
                                               window.mozRequestAnimationFrame ||
                                               window.webkitRequestAnimationFrame || 
                                               window.msRequestAnimationFrame;
                window.requestAnimationFrame(mainLoop);

                var currentTime = Date.now();
                var timeDelta = (currentTime - lastTime);
                draw(timeDelta);
                lastTime = currentTime;
            }

        </script>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600">
        </canvas>
        <script>
        </script>
        <button type="button" style="position:absolute; left:500px; top:600px; width:100px; height:50px;" class="start" onclick="mainLoop()">start</button>
    </body>
</html>

and here is the result picture in Chrome, I want only one rectangle, but the clearRect function didn’t clear the old rectangle, so…, how to fix this?
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are missing beginPath. Without it each box is actually part of the last box.

        cxt.beginPath();
    cxt.moveTo(this.vertices[0].x, this.vertices[0].y);

    for (var i = 1; i < this.vertices.length; ++i) {
        cxt.lineTo(this.vertices[i].x, this.vertices[i].y);
    }

    after adding that, the box seems to jiggle around, not sure if thats your intention.

    Here’s a fiddle: http://jsfiddle.net/6xbQN/

    Good luck!

    • 0