Image in HTML Canvas is not rotating

Question

I am creating a website in which I am showing some images. I have gone through many websites and there is no result.

HTML:

<head></head>
<body onload=init()>
    <img id="imgID" src="images/buttons/panda-wall.jpg" alt="panda wall" width="100" height="100"><br></br>
    <canvas id="myCanvas" height="400px" width="400px" style="border:1px solid"></canvas>
    <button onclick="rotateImage()">Clear canvas</button>
</body>

JavaScript:

function init()
{
    var c = document.getElementById("myCanvas");
    var context = c.getContext('2d');
    var img = document.getElementById("imgID");

    context.drawImage(img,0,0,c.width, c.height);
}

function rotateImage()
{
    var c = document.getElementById("myCanvas");
    var context = c.getContext('2d');
    var img = document.getElementById("imgID");

    context.save();

    // Translate
    context.translate(200, 200);

    // Scale
    context.scale(2,2);

    // Rotate it
    context.rotate(10*Math.PI/180);
    context.translate(-200, -200);
    context.drawImage(img,0,0);

    // Finally draw the image data from the temp canvas.
    context.restore();
}

Thanks in advance.

Update:- I have fixed my problem with the below changes:

function rotateImage()
{
   var c=document.getElementById("myCanvas");
   var context = c.getContext('2d');
   var img = document.getElementById("imgID");

   //clear the context object rectangle.
   context.clearRect(0, 0, c.width, c.height);              

   //Save the context object.
   context.save();

   // Translate
   context.translate(c.width/2, c.height/2);

   // Rotate it with 90 degree
   context.rotate(90*Math.PI/180);

   //Translate the image on the basis of the center of the canvas.
   context.translate(-(c.width/2), -(c.height/2));

   // Draw the Image.
   context.drawImage(img,0,0, c.width,c.height);

   // Finally draw the image data from the temp canvas.
   context.restore();               
}

But still I am having issues to find the exact possition of my co-ordinates for larger images (e.g. width:800px and height:1280px). for small Images (e.g width:240 and height:400) I am using the below logic for getting X and Y co-ordinate values:

X=(Image.width/canvas.width)*current_mousePosition.X; Y=(Image.height/canvas.height)*current_mousePosition.Y;

but this logic fails for the larger images, width and height as mentioned above. Can anyone please help me what will be the logic to get the exact co-ordinates of the current mouse position respective to the original Image. Is there any default logic available for all in all size images? Any help, in terms of link or idea will be greatly appreciated. Thanks in advance

There is no meaningful code here - where are `rotateImage()` and `rotateCanvas()` defined? — Pekka, Nov 07 '12 at 23:31
I followed http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point link but i did not get success — SharpUrBrain, Nov 07 '12 at 23:44
@Pekka: I have updated my questions, please provide your valuable suggestion — SharpUrBrain, Nov 07 '12 at 23:51

score 0 · Answer 1 · edited Nov 08 '12 at 00:41

0

draw it in img.onload function.

edited Nov 08 '12 at 00:41

John Conde

217,595
99
455
496

answered Nov 08 '12 at 00:25

simonleung

21
1

In my code on body load I am calling the Init method to draw the Image. Anyway I fixed the issue by removing the context.scale(2,2); Now problem is something different. The problem is, I am not getting any universal logic for getting current mouse cursor x and y co-ordinates respective to the original Image. Can you please help me provide me any link or idea? – SharpUrBrain Nov 08 '12 at 07:54

score 0 · Answer 2 · edited Nov 08 '12 at 01:43

0

Add:

var clickedTimes = 1;

And changed it in your function rotateImage:

context.rotate(clickedTimes * 10 * Math.PI / 180);

And, you can resolve it with other methods.

edited Nov 08 '12 at 01:43

Dave Clemmer

3,741
12
49
72

answered Nov 08 '12 at 01:17

user1572893

1

I fixed the issue by removing the context.scale(2,2); Now problem is something different. The problem is, I am not getting any universal logic for getting current mouse cursor x and y co-ordinates respective to the original Image. Can you please help me to get the answer? – SharpUrBrain Nov 08 '12 at 07:52

Image in HTML Canvas is not rotating

2 Answers2