Animating a for loop in javascript (canvas)

Question

I made a for loop which draws 40 rectangles , they all need have height: 400px; but I want to start at height: 0; and animate to 400 with requestAnimationFrame This is my code :

function draw(){

    height += 5;
        if(height > 1){
            for (var i = 0; i < dataSales.length; i++) {

                    geel += 6;
                    blauw += 6;
                    groen -= 6;
                    xPos += 23;
                    ctx.beginPath();
                    ctx.fillStyle= "#89C349";
                    ctx.rect(xPos,595,20,-height);
                    ctx.fill();
            }
        }
    window.requestAnimationFrame(draw);
    }

whats the issue? what part is/isnt working? what do you need help on? — atmd
– atmd, Commented May 14, 2015 at 13:35
if i do log i can see my height is going up, but my rectangles just draw at 5px height and stop. — user3441089
– user3441089, Commented May 14, 2015 at 13:41
can you show the full code? or better yet recreate in a jsfiddle? — atmd
– atmd, Commented May 14, 2015 at 13:51

JosiahDaniels · Accepted Answer · 2015-05-14 14:43:08Z

1

The issue is that the second time draw gets called, xPos = 907, the third time draw gets called xPos = 1804, etc.

You want xPos, geel, blauw and groen to all be defined inside draw so that they reset every time. Here is a fiddle.

answered May 14, 2015 at 14:43

JosiahDaniels

2,57022 silver badges40 bronze badges

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

1 Comment

user3441089 Over a year ago

Thanks alot! , Now i still have a little problem , actually the bars should go as high according to the dataSales[] , like height = dataSales[i] / 800 , is there a way to do that?

Collectives™ on Stack Overflow

Animating a for loop in javascript (canvas)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related