Web Animation using HTML 5 canvas and JavaScript in under 15 mins

Learn how to create animations using particles and HTML 5 APIs.

Have suggestions or video requests?
Drop them in the comments section below.

[macrofis]

Hey! Thank you so much for this sharing, I was looking for this effect for 2 days. Actually I was working on canvas "particles" treating them as a single object then develop a path, so rustic solution. Imagine thousand of this object with different color, was so terrible headache hahaha. Ty again for this elegant code. Thumbs up and Sbed! You save me a lot time.

[Frankslaboratory]

Thanks Shikhar, this was really well explained. I'm experimenting with the animation now.

[davinanaya]

Really really good, you should create like a course about advanced canvas

[AndyRocket]

Do you understand your own tallent ? This is the best Canvas video on the Internett! I can guarantee you! The reason you have only 3000 views, Is because it is to good man! (And also just one video.) But this kind of stuff, if payed information in the Capital world, you see? pro information/Industry information. And Youtube is more like an Mass Media entertainmant kind of thing. So you could easily pump up the game Sir. Udemy? You must be teaching at theUniversity or work with the best people. All ready I guess? But thank You! This is my Saturday night here in Norway. And your video are really topping my evening. Cheers -mr Rocket-

[ArekM]

A lot of fun! Thank you. It's great idea how you analyse image data. I wonder why you have used only "data.data[p+3]". It's opacity right? But other values have data about color in RGB format, so it's easy add next attribute to particle:
color: 'rgba('+data.data[p+0]+', '+data.data[p+1]+', '+data.data[p+2]+', '+data.data[p+3]/227+')'
and use it in funcion "render" before fillRect:

[НадеждаКовалева-гв]

It's awesome!
It's looks like great!!
Thanks you =)

[wirandhikablogs]

thanks for sharing dude.
stay awesome!

[CHIRAGPACHAURI]

Proposing girl today with this 😊😊😊 thanks buddy

[ulfatalemi]

thank you for amazing video and i would like to ask you that, the code is not working on mobile and safari browser please let me know what i can do

[rajsuthar]

Which course would give formal training to master such animation ? For a 12th class pass.

[howang]

does this require good computer, my website crashed just for console.log the x and y...

[jagjeetchhabra]

Can you tell how did you encode the image in base64?
(sorry if my question is stupid i am not familiar with javascript i just started learning it from free codecamp and wanted to do some stuff with it)

[spiderous]

Hey! I've got a problem in my code with getImageData method. Google Chrome won't load the data due to some safety restrictions (an error says: "The canvas has been tainted by cross-origin data."). I'm very confused about the problem because Firefox doesn't log the error while I want to grab image data. I load my images from the same folder where my JS script is so I don't really get where's the danger...

[Frankslaboratory]

This is really hard to recreate with vanilla JavaScript without TweenMax, giving up for today.. :D

[emperorheyman]

Uncaught TypeError: Cannot read property 'getContext' of null... HELP

[pixeldustinteractive]

You sped up the video... liarrrr not under 15 minutes lmao good video

[baihaichan]

awsome，thank you so much, i got it, it would be better if you could give me your cantact information, like email or something else, cause i want to lear from you

[adamyep]

very hard man, i can't write your code to animate images. sorry :(

[akmalkrmv]

why you used image of German nazi SS group as an example? )