how do you rotate specific image layers on a canvas?

Question

I have a canvas that draws a background image and then draws several layers:

context.drawImage(background, 0, 0, width, height);
layers.forEach((layer) => {
  context.drawImage(layer, 0, 0, width, height);
});

I would like to animate rotating the layers, but keeping the background fixed.. I tried doing something like:

animationLoop() {
  const t = document.timeline.currentTime;
  context.clearRect(0, 0, width, height);
  context.drawImage(background, 0, 0, width, height);
  context.save();
  context.rotate(Math.PI * t);
  layers.forEach((layer) => {
    context.drawImage(layer, 0, 0, width, height);
  });
  context.restore();
  requestAnimationFrame(animationLoop);
}

But that still seems to rotate everything, including the background.. How can I accomplish this?

Answer 1

maybe you try running

function animationLoop() {
  const t = document.timeline.currentTime;
  context.clearRect(0, 0, width, height);
  context.drawImage(background, 0, 0, width, height);
 
 layers.forEach((layer) => {
   context.save();
   context.translate(width / 2, height / 2);
   context.rotate(Math.PI * t);
   context.drawImage(layer, -width / 2, -height / 2, width, height);  
   context.restore();
 });
 
 requestAnimationFrame(animationLoop);
}

animationLoop();