/    Sign up×
Community /Pin to ProfileBookmark

Canvas: Why I can’t rotate an image?

Copy linkTweet thisAlerts:
Nov 27.2012

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>[/CODE]

base on the code on:
[url]http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2[/url]

Thanks
Nadav

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ReFreezedNov 27.2012 — You have to call ctx.rotate() before calling ctx.drawImage() as t[COLOR=#000000][FONT=verdana]he rotation only affects drawings made after the rotation has been done.[/FONT][/COLOR]
Copy linkTweet thisAlerts:
@nadavvinauthorNov 28.2012 — Thanks!

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

for example:
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

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

&lt;script&gt;
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);

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;


Thank

Nadav
Copy linkTweet thisAlerts:
@ReFreezedNov 28.2012 — It's because putImageData() simply does not specifically [I]draw[/I] anything onto the canvas - it directly [I]puts[/I] 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 [COLOR=#333333]rotate()[/COLOR].)
Copy linkTweet thisAlerts:
@apple78Jul 05.2013 — anyone here knows whether the following codes is working or not? but this is .net solution ,Im currently working thiw that.

check [url=http://www.rasteredge.com/how-to/csharp-imaging/rotate-image/][color=#3c3c3c]image rotating in .net[/color][/url]
<i>
</i>using RasterEdge.Imaging.Basic;
using RasterEdge.Imaging.Basic.Core;
using RasterEdge.Imaging.Processing;
using RasterEdge.Imaging.Basic.Codec;

namespace RE__Test
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

<i> </i> private void button1_Click(object sender, EventArgs e)
<i> </i> {
<i> </i> string fileName = "c:/Sample.png";

<i> </i> REImage reImage = REFile.OpenImageFile(fileName);

<i> </i> ImageProcessing.ApplyRotate(reImage, 60);

<i> </i> REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());
<i> </i> }
<i> </i>}
}
Copy linkTweet thisAlerts:
@danny_roughAug 23.2013 — I do this almost daily. I use an imaging sdk found on the internet which can [COLOR="#000000"]rotate images[/COLOR] found on the internet . Install it and it becomes a selectable processing option.Then you can rotate images in any program at all, including Adobe Acrobat . Just open the images, select rotate ,and follow the setps given in the sdk, the task will be finished in several seconds. if you haven't found a good choice , you can have a try. best wishes.
×

Success!

Help @nadavvin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...