html5 canvas animation basics tutorial for beginners javascript programming lesson

Lesson Code:
Learn the entry level basics of animation programming on the HTML5 canvas element using Javascript to perform the animated effect. The 3 basic steps to canvas tag animation programming are (1) Draw your assets (2) Clear the canvas (3) Redraw your assets into a new location or state of being. Your animation speed and fluidity depends on the time interval you set for a setTimeout() or setInterval() method in Javascript. It also depends on the incremental factors of any animations.


Whitney Hollingsworth says:

Hey Hey Heeeeeeeeeeeeeeey! lol THANK YOU SO MUCH for this great tutorial! It was very informative and easy to understand! ^_^ The loopTimer variable knocked me for a loop (lol), but I’ll watch your previous video to understand that! Keep up the awesome work! 😉 #NewSubscriber [I LOVE your accent! Cute profile photo!]

Gray Fox says:

border #666 : illuminati confirmed

Heaven Niebo says:

What kind of tool are you using to write this code?

Christopher Park says:

I laughed so hard at the poop and pee part lol


plzzzzzzzzzzzz say the editor or ide whatever you used for writing the code………..

Sarah Bell says:

Nice video. Thanks for taking the time to make it.

SnooBie says:

Why This DOsent Work ??
If I saved the

Sandis Ratnieks says:

uuugh! what is happening? i watched at least 15 youtube animation videos and non of them work!! can someone help me?

Anjankumar Sahoo says:

great  tutorials

Jean-Sebastien Lemelin says:

I am 44 years old returning to school, it helped alot.

Mark Bono says:

I enjoyed this lesson. One question though, I noticed my ctx.fillStyle =”rgba (0,200,0,1)”; was grayed out when I added the quotations giving me a black box animation that otherwise worked fine. Also when I removed the quotations and hit the draw button,nothing happened. If anyone has suggested fixes, I am all ears.

James Niedzialek says:

Hello Adam, can you please tell me how to have your box moving in a vertical formation instead of going from left to right? I appreciate it. Thank you. Love your videos.

Josy Pam says:

Thank you Professor Adam!

Robert Rickler says:

good tutorial

DiamondDena1 says:


Janik Claßen says:

I love that your microphone makes the sound of your voice kind of “old”.. really nice tutorial. Thank you.

jumbosearchuk says:

thanks lots of benefits to your  video

VIRCH says:

I Peed a little.Well done. I can die happy

Deepak Pun says:

Thanks Adam for this wonderful vide. Just quick question, what if I want the box to just keep bouncing off the borders(left,right,top,bottom) of the canvas in random fashion?
Thanks and hope to hear from you soon.

Vipul Singh says:

hey adam hw +x+ and +y+ working and what is meanin of tht …plz reply me

chris siemers says:

just want to say as a 41 yr old back in school you’re videos explain this better than any professor can.

surc says:

my box is flickering. 🙁

Floris Bollen says:

THX, I’ve been programming in p5.js, a javascript framework, and now I wanted to program in real javascript, but I didn’t know how to make a loop dat updates the canvas after it passed trough!


dude what type of editor r u using

krap art says:

Adam, I really love your tutorials. You explain things so clearly and share only the most important stuff, and they’re entertaining too! Thanks for doing these.

Ryan Henderson says:

Perfect!  You’re a great teacher Adam!

Felix Silwimba says:

It now makes a lot of sense for me.

Roy Niepes says:

subscribe 😀 man Im going to watch more of your tutorials! 🙂

lo la says:

how can I download html .i want to share my animation with another format

dancun chiriga says:

Awesome.Much appreciated

Matt Beddows says:

A great tutorial, and a great teacher! Thank you.

Nilsmoke says:

Thanks. Worked a treat.

Sam Aman says:

awesome tutorial


plzzzzzzzzzzzz say the editor or ide whatever you used for writing the code………..

Antonio Johnson says:

mine wont work. Can you help?

Santiago Orihuela says:

mine wont work either , something may be depreciated

Earl Grey says:

Dude, you’re awesome!!! Helped me a lot : )

luis r says:

2 mins in and I already know this going to be good.

Vanessa Kent says:

hi thanks it works, how can i apply this code to images?

George Roros says:

XD you’re comments had me geeked

 Write a comment


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!