Loops in HTML5 Canvas Animations

Question

I am writing code for a HTML5 Canvas animation using Javascript. I am using requestAnimFrame for that. Animation is working fine for a point. But when i add a loop(for or while) in the function which is using requestAnimFrame or setTimeout, animation doesnt work. Its important for me to add the loop. ANy Suggestions to make that possible?

function animate(lastTime) {
            var date = new Date();
            var time = date.getTime();
            var timeDiff = time - lastTime;
            var linearSpeed = 100;
            var linearDistEachFrame = linearSpeed * timeDiff / 1000;
            var currentX = LINE.x;              
            var currentY = LINE.y;
                var newY = currentY + linearDistEachFrame;
                var newX = currentX + linearDistEachFrame;
                context.beginPath();
                context.moveTo(LINE.x, LINE.y);
                lastTime = time;

                var Xindex=LINE.arrayX.indexOf(newX);

                //here am getting error..if i replace this with 'if' its working fine..and even if there is not a single LOC it doesnt work
                 while(Xindex!=-1) {
                                        //processes the loop
                 }

                context.lineTo(LINE.x, LINE.y);
                context.fillStyle = "red";
                context.fill();
                context.lineWidth = LINE.borderWidth;
                context.strokeStyle = "red";
                context.stroke();
            // request new frame

            requestAnimFrame(function() {
                animate(lastTime);
            });
        }

where is the code? are we supposed to guess where the problem is ? — mpm, Apr 16 '12 at 11:32
some code pls...what worked and what didn't...how you've structured the thing might be the reason — tipycalFlow, Apr 16 '12 at 11:32
added the code..if i replace the 'while' with 'if' it works..and even if there is no code inside the loop it doesnt work... — thecodejack, Apr 16 '12 at 11:40
Is it possible you're in an infinite loop? If you're looping on a false condition, and there's nothing in the loop to change the condition, it's never going to move on... — aaaidan, Apr 16 '12 at 11:50
no actually the 'Xindex' returns -1 and never gets inside the loop in the beginning... — thecodejack, Apr 16 '12 at 11:55

aaaidan · Answer 1 · 2012-04-16T12:05:41.250

Try adding a break statement in the loop and see if that fixes it. If it does, it means that the condition has been met, and the code will be stuck in the loop forever unless you break out, or change Xindex to -1.

You need to narrow down exactly where the code is failing. One way to do this is by printing out debug statements at key parts of the code, so you know for sure they were executed, and what the value of important variables was.

You can use console.log("test"); for example, to write to Chrome's JavaScript console, or Firebug, or similar.

One trouble you'll face with debug output for a working animation program is the screeds of output. You might want to log only in certain interesting circumstances or you'll be drowning in a stream. Of data.

Loops in HTML5 Canvas Animations

1 Answers1