html5 - I can't animate a canvas generated block -

html5 - I can't animate a canvas generated block -

i using html5 canvas , wrote next program:

var canvas1 = document.getelementbyid("mycanvas"); var context1 = canvas1.getcontext("2d"); var animation = 20; var = 0; function draw(x) { context1.fillstyle = "#fff000"; context1.fillrect(x,30,100,100); } function animate() { while (i>1000) { context1.clearrect(0,0,1000,200); draw(animation); if (animation >= 980){ animation = 20; } animation++; } } animate();

this next block hosting on web page @ http://ec2-54-83-18-3.compute-1.amazonaws.com/. if looked @ website, can see, nil displayed. however, if take out "animate();" , set in "draw(some integer);", displays yellowish cube it's supposed to, without animation.

i trying send yellowish block along x axis 20 pix 980 pix (my screen 1000 pix width). hope move indefinitely, made sure terminated before because wondered if problem. didn't work.

as can see url, using amazon ec2 web services. instance ubuntu.

my instance size micro (which brings problem minecraft sometimes).

my os windows 8.

i hope of helped.

thanks.

edit: hope off can because on website server ip. don't want hacker going around trying pull prank on server or worse, not find worth time(because of domain name, pretty remote, want maintain way until i'm ready).

this has little canvas, , more how js in browser works.

because in every browser runs in same thread (that includes running js, updating elements on page, , drawing updates), means if set dozen things within of loop, expecting them drawn, won't happen until js stops running.

this includes animating dom elements, changing css, etc. if create changes in loop, won't see them until end of loop (and end of calling function, , it's calling function, etc).

what want set timer of sort.

there lots of ways of doing that. new standard (supported practically every browser supports <canvas> requestanimationframe(animate), animate function, animate 1 frame.

you more frames of animation calling same function again.

var keepgoing = true; function animate () { /* ... draw stuff */ if (keepgoing) requestanimationframe(animate); // calling } animate();

or, alternatively (and preferably)

requestanimationframe(animate);

requestanimationframe work of setting timeouts you; can't do, seek lock animation 60fps, , lock drawing in time monitor's refresh cycle (something you'd never have access in browser, "v-sync").

you can manually, managing settimeouts or setinterval (or setimmediate, if supported/polyfilled), don't have other benefits come specialty call.

the moral pretty much js in-browser standpoint, should either reactionary (event/message-based) or asynchronous (callback/promise/wrapped-generators, et cetera). server-side js should, well, matter.

html5 canvas