How do I rotate two images [on the same Canvas] in opposite directions?

Question

I've been unable to rotate two images in opposite directions using the canvas state() and restore() functions. Any solutions are most appreciated, thank you!

Here is my code:

program.ctxT.globalCompositeOperation = 'destination-over';
program.ctxT.save();

program.ctxT.clearRect(x - 1, 0 - 1, 72, 62);
program.ctxT.translate(x + 35, 0 + 25);
program.ctxT.rotate(Math.PI / 135);
program.ctxT.translate(-(x + 35), -(0 + 25));
program.ctxT.drawImage(program.imgBody, x, 0);
program.ctxT.restore();

program.ctxT.globalCompositeOperation = 'destination-over';
program.ctxT.save();

program.ctxT.translate(x + 35, 0 + 25);
program.ctxT.rotate(Math.PI / -135);
program.ctxT.translate(-(x + 35), -(0 + 25));
program.ctxT.drawImage(program.imgHead, x, 0);
program.ctxT.restore();

Answer 1

Sorry about the misunderstanding, I'm still new to actually posting on Stack Exchange. My issue was not fully understanding how save() and restore() work (of course), but here's my best explanation; perform transformations/ state changes that you want applied later and save() those, then separate yourself from the previous state changes and perform a different set of state changes to be applied to your next image/ shape, continue doing this until you have reached the last item you want transformed indepenedently (as a note, with the last item, you don't have to save, just draw the item you want). Now that all the transformations are done and saved and you've drawn your first item, you use restore() and then draw the next item in you want drawn, continue this for all the items in you want drawn. One important thing to note is the globalCompositeOperation property, search this up because this determines how your images are stacked. Hopefully this explanation is sound and I apologize for not doing this earlier.

function update() {
   //Merely clearing the canvas in the area our image was previously in.
   program.ctxT.clearRect(x - 35, 0 - 18, 108, 81);

   //Rotate canvas and save this state, this will be applied to the body or underlying element.
   rotCentre(35, 25, Math.PI / -135);
   program.ctxT.save();

   //This keeps track of the body rotation.
   rot++;

   //Applies the same rotation as earlier to move the head with the body.
   program(35, 25, Math.PI / -135);

   /* Although the head moves with the body, it should not changes its facing, so compensation. 
   The title says two images moving in opposite directions, but this only kind of does that, 
   if you do want them to be visually moving in opposite directions, just multiply the rot by
   a number greater than one.*/
   program(8, 8, rot * Math.PI / 135);

   //Draw the overlaying image (head).
   program.ctxT.drawImage(program.imgHead, x, 0);

   //Moving onto the lower layer, restore the transformations we are using for it and draw.
   program.ctxT.restore();
   program.ctxT.drawImage(program.imgBody, x - 35, -17.3);
}   

function rotCentre(centreX, centreY, angle) {
   //This allows the head to be overlayed.
   program.ctxT.globalCompositeOperation = 'destination-over';

   //First translate the context so that it will rotate around the image's centre.
   program.ctxT.translate(x + centreX, 0 + centreY);
   program.ctxT.rotate(angle);

   //Remember to put the context back to its original position!
   program.ctxT.translate(-(x + centreX), -(0 + centreY));
}