Question

I want to move the rectangle horizontally,however,it enters the updateStageObjects() function several times but does not update the value of myRectangle.x.How do I fix this?

 <script type="text/javascript">
            var interval = 10;
            var x=0;
            var y=0;
            var myRectangle;
            var context ;
            var canvas;
        function Rectangle(x, y, width, height, borderWidth) {
                this.x=x;
                this.y=y;
                this.width = width;
                this.height = height;
                this.borderWidth = borderWidth;
            }
        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 updateStageObjects() {
                var amplitude = 150;
                var centerX = 240;  
                myRectangle.x += 100;
    alert(myRectangle.x+"   "+myRectangle.y);                   
            }    
            function clearCanvas() {                
                context.clearRect(0,0,canvas.width, canvas.height); 
            }

            function DrawRect(){

                setTimeout(CheckCanvas,10);
                clearCanvas();
                updateStageObjects();
                DrawRects();
            }   
        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 DrawCanvas(){
            if (CheckCanvas()){
                canvas = document.getElementById('Canvas');
                DrawRects();
                setInterval(DrawRect, 10);      
            }
    }
</script>

html

   <canvas id="Canvas" width="800px" height="800px" onclick="DrawCanvas()"> Nor   supported</canvas>

Answer 1

Every time you call updateStageObjects(), it is followed immediately by a call to DrawRects(), which creates a new rectangle at exactly (250,70,100,50, 5). So you’ll never notice it increment by 100.

You’ll need to pass some numbers back and forth between these functions if you want one of them to remember the changes made in another.