Question

I wanted to do a sort of animation where a rectangle would move..However, the code seems to loop only once and the rectangle is static..How do I fix this and what’s wrong ?

<script type="text/javascript">



            var interval = 10;
var x=0;
var y=0;
var rect = null;
var context ;

function Rectangle(x, y, width, height, borderWidth) {
this.x=x;
this.y=y;
this.width = width;
this.height = height;
this.borderWidth = borderWidth;
}


$(document).ready(function(){


        if (CheckCanvas()){

                var canvas = document.getElementById('Canvas');
                context =canvas.getContext('2d');
                $('#Result').text('Canvas supported...');
                $('#Result').text($('#Result').text()+'Sound supported...'+CheckSound());
                $('#Result').text($('#Result').text()+'Video supported...'+CheckVideo());   
                $('#Result').text($('#Result').text()+'Storage supported...'+Checkstorage());



                DrawRects();
                DrawRect();


            }
        function CheckCanvas(){
                return !!(document.createElement('canvas').getContext);

            }   

        function CheckSound(){


            return !!(document.createElement('sound').canPlayType)

            }

        function CheckVideo(){


            return !!(document.createElement('video').canPlayType)

            }

        function Checkstorage(){


            return !!(window.localStorage)

            }


        function CheckVideo(){


            return !!(document.createElement('video').canPlayType)

            }
        function DrawRect(){
            alert("Draw1");
                clearCanvas();

                updateStageObjects();

                DrawRects();
                setTimeout("DrawRect()", 5);
                alert("Draw3");

            }

        function updateStageObjects() {
            var amplitude = 150;
            var centerX = 240;  
            var nextX = myRectangle.x+ 10;

            myRectangle.x = nextX;  
        }

        function clearCanvas() {
            context.clearRect(0,0,canvas.width, canvas.height);
        }

        function DrawRects(){


                myRectangle = new Rectangle (250,70,100,50, 5);
                    context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);


                context.fillStyle="#8ED6FF";
                context.fill();
                context.lineWidth=myRectangle.borderWidth;
                context.strokeStyle="black"; 
                context.stroke();


            }



    })

</script>

//// Html /////

 <canvas id="Canvas" width="800px" height="800px"> Nor supported</canvas>

Edited version

            var interval = 10;
var x=0;
var y=0;
var rect = null;
var context ;

function Rectangle(x, y, width, height, borderWidth) {
this.x=x;
this.y=y;
this.width = width;
this.height = height;
this.borderWidth = borderWidth;
}


function DrawRect(){
            alert("Draw1");
                clearCanvas();

                updateStageObjects();

                DrawRects();
                setTimeout(DrawRect(), 5);
                alert("Draw3");

            }

        function updateStageObjects() {
            var amplitude = 150;
            var centerX = 240;  
            var nextX = myRectangle.x+ 10;

            myRectangle.x = nextX;  
        }

        function clearCanvas() {
            context.clearRect(0,0,canvas.width, canvas.height);
        }

        function DrawRects(){


                myRectangle = new Rectangle (250,70,100,50, 5);
                  context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);


                context.fillStyle="#8ED6FF";
                context.fill();
                context.lineWidth=myRectangle.borderWidth;
                context.strokeStyle="black"; 
                context.stroke();


            }


        function CheckCanvas(){
                return     !!(document.createElement('canvas').getContext);

            }   

        function CheckSound(){


            return !!(document.createElement('sound').canPlayType)

            }

        function CheckVideo(){


            return !!(document.createElement('video').canPlayType)

            }

        function Checkstorage(){


            return !!(window.localStorage)

            }


        function CheckVideo(){


            return !!(document.createElement('video').canPlayType)

            }



$(document).ready(function(){





            if (CheckCanvas()){

                var canvas = document.getElementById('Canvas');
                context =canvas.getContext('2d');
                $('#Result').text('Canvas supported...');
                $('#Result').text($('#Result').text()+'Sound supported...'+CheckSound());
                $('#Result').text($('#Result').text()+'Video supported...'+CheckVideo());   
                $('#Result').text($('#Result').text()+'Storage supported...'+Checkstorage());



                DrawRects();
                DrawRect();


            }
    })

Problem still persists..

Answer 1

I’ve created a sample for you in jsFiddle that works:

http://jsfiddle.net/uZS3g/4/

1. Move the definition part above the normal part

2. Writing DrawRect as an anonymous function will allow for easier callbacks, like this:

   var DrawRect = function () {
           console.log('draw');
           clearCanvas();
   
           updateStageObjects();
   
           DrawRects();
           setTimeout(DrawRect, 5);
   
   }
   

Edit: I see pimvdb was quicker, you may still play around with the jsfiddle though.