Canvas: Why I can't rotate an image?

**nadavvin** · 11-27-2012, 10:01 AM

Why This code not rotate the image?

Code:

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
ctx.rotate(30*Math.PI/180);
</script>

</body>
</html>

base on the code on:
http://www.w3schools.com/tags/tryit....vas_drawimage2

Thanks
Nadav

**ReFreezed** · 11-27-2012, 04:55 PM

You have to call ctx.rotate() before calling ctx.drawImage() as the rotation only affects drawings made after the rotation has been done.

**nadavvin** · 11-28-2012, 04:12 AM

Thanks!

I need to rotate part of the image, why does it not work with putImageData?

for example:

Code:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

var imgData=ctx.getImageData(30,30,50,50);
ctx.rotate(30*Math.PI/180);
ctx.putImageData(imgData,10,70);

</script>

</body>
</html>

Thank
Nadav

**ReFreezed** · 11-28-2012, 03:24 PM

It's because putImageData() simply does not specifically draw anything onto the canvas - it directly puts the image data (pixels) into the canvas just as they are. I don't believe you can rotate image data.

One solution would be to redraw the part of the image you want to "copy" instead of using getImageData and putImageData. (In other words, you'd have to draw your red rectangle again in the new place after calling rotate().)

Thread: Canvas: Why I can't rotate an image?

Thread Tools

Display

Canvas: Why I can't rotate an image?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions