Canvas Animation Tutorials | Sololearn: Learn to code for FREE!


Canvas Animation Tutorials

Hi guys I'm really in need of some good tutorials that can give me a head start on how to create cool animations with canvas using javascript. I really wanna know (the logic) how you guys create all these awesome codes i see on the code trending list. I'll really appreciate any help from website links to books.

11/22/2018 2:03:46 PM

Germain F

11 Answers

New Answer


I'd recommend p5.js. It's an open source library that makes canvas animations and games as easy as it can get: There's an online editor, so you can literally start just by clicking this link. And there's this guy who makes pretty much the best videos out there on this topic. You can get started in no time. Good luck!


Some simple Javascript codes


I found youtube videos by Adam Khouri very helpful. His videos cover all sorts of animation techniques, including the canvas. He also provides a series of videos he calls 'Canvas Bootcamp' which you might like to take a look at. MDN also provide good introductory material if you follow the link provided by Magneto. Best of luck Console.


Well, you want a logic, here i tell you You know that animationsis a lot of pucture right? So In canvas, its not moving, but a lot of shapes. In step: new image Delete last image New image Delete last image New image Delete last image


You can combine p5.js with Anime.js P5.js is a graphics library, and Anime.js is a animation library, that can animate your p5.js graphics.


Take a look here: see also:



You can visit Chris Course channel on YouTube!! It will also be helpful for learning canvas!!


Check out the coding train on YouTube.


thanks guys


Search YouTube. there are tons of good canvas tutorials there.