Passaggio all'ora legale 31 marzo 2019 02:0003:00 sposta avanti l'orologio di 1 ora (si dorme 1 ora in meno)
Partendo dall'animazione precedente, Come creare un animazione in JavaScript, è possibile riorganizzare un po' il codice per gestire più oggetti animati.
Se non vedi l'animazione clicca sul canvas o ricarica la pagina

Per prima cosa definisco un array sprites per contenere tutti gli oggetti da animare:
const sprites = [];
poi creo una funzione per aggiungere gli sprite:
//e gestisco lo scpostamento sull'asse x (deltaX) e y (DeltaY)
function createSprites() {
  sprites.push({
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 35,
    color: "red2",
    deltaX: 1,
    deltaY: 2,
  });

  sprites.push({
    x: 50,
    y: 50,
    radius: 15,
    color: "yellow",
    deltaX: 4,
    deltaY: 0,
  });
}
in questo caso ogni oggetto (sprite) ha le proprietà x, y e radius per rappresentare la posizione nel canvas e le dimensioni dell'oggetto. Una proprietà color che definisce il colore di riempimento e due proprietà deltaX e deltaY che specificano la velocità con cui si muoverà lo sprite.

Il passo successivo è aggiungere una funzione per animare gli sprites e aggiornare le coordinate x e y in funzione della velocità deltaX e deltaY:
function updatePosition() {
  sprites.forEach(sprite => {
    // per ogni oggetto calcolo la nuova posizione
    sprite.x += sprite.deltaX;
    sprite.y += sprite.deltaY;
  });
}
e un altra per disegnarli sul canvas
function draw() {
  ctx.beginPath();
  ctx.fillStyle = '#000';
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fill();
  //inizio l'animazione
  sprites.forEach(sprite => {
    //disegno gli oggetti nella nuova posizione
    ctx.beginPath();
    ctx.fillStyle = sprite.color;
    ctx.arc(sprite.x, sprite.y, sprite.radius, 0, 2 * Math.PI);
    ctx.fill();
  });
}
a questo punto non rimane che modificare la funzione animationLoop per richiamare updatePosition e draw:
function animationLoop() {
  updatePosition();
  draw();
  requestAnimationFrame(animationLoop);
}
ed infine inizializzare gli sprites e far partire l'animazione:
function init() {
  createSprites();
  animationLoop();
}
init();
Il risultato è l'animazione a inizio pagina con due palline, una gialla e una rossa che si muovono con differenti velocità.