HTML5/Javascript - My simple canvas animation isn't working

Question

I thought this would be the kind of thing there would be plenty of tutorials on, however every one I found was either over-complicated, vague, or used features not yet widely supported. So, I decided to try it on my own. My code is below.

function drawStuff(){
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');

var i;

function animate(){
    canvas.clearRect(0,0,500,500);
    canvas.fillStyle="red";
    canvas.fillRect(0,i,50,50);
    i++;
}

    windows.setInterval(animate(), 125);
}
window.addEventListener("load", drawStuff, false);

Why isn't this working? Do I misunderstand what the setInterval does? Any help is appreciated.

A little late, but in line 2 it is preferred to put context not canvas — DUUUDE123
– DUUUDE123, Commented Jun 1, 2015 at 20:30

Artur Leśniewski · Accepted Answer · 2013-01-15 18:19:26Z

1

Please, set value to variable i

answered Jan 15, 2013 at 18:19

Artur Leśniewski

222 bronze badges

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

3 Comments

starscape Over a year ago

Which value? There's several

CM Kanode Over a year ago

initialize your variable i to 0 or whatever starting value you need.

starscape Over a year ago

Ah. This(along with steveukx pointing out a typo)fixed it. Many thanks!

steveukx · Accepted Answer · 2013-01-15 18:22:47Z

1

There is a typo in that you refer to windows rather than window, and the argument supplied should be a reference to the function you want to run, so it should be animate rather than animate() which would just call the animate function immediately.

Those two changes should make:

window.setInterval(animate, 125);

answered Jan 15, 2013 at 18:22

steveukx

4,34321 silver badges27 bronze badges

Collectives™ on Stack Overflow

HTML5/Javascript - My simple canvas animation isn't working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related