Rotate multiple images in Javascript - angularjs

Question

I have background image on background of canvas. And i want to put another image on background image. SO i can rotate upward image in any direction. I am trying javascript code which is available on internet. But both images were rotated. I want to rotate only upward image with some angle.
/* Upload first image to 0,0 co-ordinate. */
ctx.beginPath();
var imageObj = new Image();
imageObj.onload = function()
{
ctx.drawImage(imageObj, 0, 0, 300, 150);
};
imageObj.src = 'C://Users//rajesh.r//Downloads//images//images.jpg';
options.ctx.fill();
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ctx.beginPath();
ctx.translate(400,300);
ctx.rotate(2*Math.PI / 8);
var thumbImageObj = new Image();
thumbImageObj.onload = function()
{
ctx.drawImage(thumbImageObj, 0, 0, 120, 20);
};
thumbImageObj.src = 'C://Users//rajesh.r//Downloads//images//images.png';
ctx.fill();
I want some solution so i can rotate second image by some angle.

Answer 1

When you call rotate on your canvas, you're not rotating an individual image, but instead rotating the entire canvas. To only rotate the second image you need take advantage of the save and restore methods provided by the canvas API.
Here's an example, based off of the code that you shared:
// canvas setup
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
// 1st image
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, 100, 100);
};
imageObj.src = 'https://s3.amazonaws.com/so-answers/image1.jpg';
// 2nd image
var thumbImageObj = new Image();
thumbImageObj.onload = function() {
// save current canvas state
ctx.save();
// perform transformation
ctx.translate(110,110);
ctx.rotate(20*Math.PI / 180);
ctx.drawImage(thumbImageObj, 0, 0, 100, 100);
// restore original canvas state (without rotation etc)
ctx.restore();
};
thumbImageObj.src = 'https://s3.amazonaws.com/so-answers/image2.jpg';
body {
overflow: hidden;
margin: 0;
padding: 0;
}
<canvas id="canvas"></canvas>