How to create animation in html5 canvas?

Question

JavaScript

I am just starting to learn this technology. How are complex animations made on canvas? Do they really shove all the code into one setTimeout(), in the body of which they describe all the logic

Answer 1

https://developer.mozilla.org/en/docs/DOM/window.r...
No animation timers

Answer 2

How do I. I usually have a main function called handler. She is constantly called. And it already calls other functions. Well, here is my example https://jsfiddle.net/twobomb/b05nmjs5/
Development on canvas usually starts with the following code

var canvas, ctxW = 500, ctxH = 500,ctx;

  window.onload = function(){
    canvas = document.createElement("canvas");
    canvas.width = ctxW;
    canvas.height = ctxH;
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");
    handler();
  }

  function handler () {
     ctx.clearRect(0,0,ctxW,ctxH);
   //Тут вызов функций и прочие реализации

     setTimeout(handler,1000/60);
  }

Answer 3

As an option for specific tasks, you can use special canvas libraries.
For example , konvajs.github.io for regular animations (personally I advise, a very convenient OOP approach),
or wellcaffeinated.net/PhysicsJS for simple physical animations.
For serious modeling, you can use three.js
But of course it will be a plus if you know the basics of pure canvas

Answer 4

There are many libraries for creating animations on Canvas.
There are libraries for creating 2D objects and animating them , and the most popular one today is Pixi.js. You can also give an example of Fabric.js (but it is as popular and well-known as Pixi).
For creating and animating 3D models on Canvas, the de facto standard is, of course, Three.js . But it's a big and serious library)