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


Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.

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

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours