+ 8

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.

javascript canvas animation

22nd Nov 2018, 2:03 PM

Germain F

11 Answers

+ 10

I'd recommend p5.js. It's an open source library that makes canvas animations and games as easy as it can get: https://p5js.org/ There's an online editor, so you can literally start just by clicking this link. https://editor.p5js.org/ And there's this guy who makes pretty much the best videos out there on this topic. You can get started in no time. https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA Good luck!

22nd Nov 2018, 2:34 PM

Just A Rather Ridiculously Long Username

+ 11

Some simple Javascript codes http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

23rd Nov 2018, 4:20 PM

Nilavarasan

+ 7

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.

22nd Nov 2018, 3:27 PM

Richard Myatt

+ 6

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

24th Nov 2018, 12:13 PM

Jingga Sona

+ 5

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. http://animejs.com/

23rd Nov 2018, 8:21 PM

InvBoy [ :: FEDE :: ]