HTML5 canvas image rotate left rotate right

Question

I have drawn an image into canvas.

Now what i am trying is if user click on roate left button total canvas should rotate left (i.e., Image rotate to 90 degress) and if rotate right canvas should rotate right.

this is what i tried for rotation. Please suggest me the code to achieve this

var canvasId = document.getElementById("preview");
var cntxt = canvasId.getContext("2d");
cntxt.translate($("#preview").width()-1, $("#preview").height()-1);
cntxt.rotate(convertToRadians(90));
cntxt.drawImage(canvasId, 0, 0, $("#preview").width(), $("#preview").height());

function convertToRadians(degree) {
    return degree*(Math.PI/180);
}

Working Solution:

// Getting the canvas
var canvasId = document.getElementById(id);
var ctx = canvasId.getContext("2d");

// Store the current transformation matrix
ctx.save();

ctx.setTransform(1,0,0,1,0,0);

// Getting the canvas width and height
var w = $("#preview").width();
var h = $("#preview").height();

ctx.clearRect(0, 0, w, h);

// Restore the transform
ctx.restore();

// TranslateX should be canvaswidth/2 and translateY should be canvasheight/2
var translateX = w/2;
var translateY = h/2;

// translating the context
ctx.translate(translateX,translateY);

// As we need to rotate the image to 90 degrees
// Where r can be 1 to 36 for 10 to 360 degree rotation
var r = 9;
ctx.rotate(r*10*Math.PI/180);
ctx.translate(-translateX,-translateY);

// Drawing canvas
ctx.drawImage(ImageObject, 0, 0, w, h);

One more doubt can't we rotate the whole canvas to keep the proper aspect ratio of the image

MJQ · Accepted Answer · 2012-10-16T13:25:38.253

4

Here is the simple code for that,

var canvasId = document.getElementById("preview");
var ctx = canvasId.getContext("2d");
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0, 0, $("#preview").width(), $("#preview").height());
var translateX = ($("#preview").width())/2;
var translateY = ($("#preview").height())/2;
ctx.translate(translateX,translateY);
var r = 9;
ctx.rotate(r*10*Math.PI/180);
ctx.translate(-translateX,-translateY);
ctx.drawImage(imgsrc, 0, 0, $("#preview").width(), $("#preview").height());

Where r can be 1 to 36 for 10 to 360 degree rotation.

edited Oct 16 '12 at 13:25

answered Oct 16 '12 at 11:34

MJQ

1,778
6
34
60

i implemented like this but no luck. Instead of rotation total image is disappearing. Code updated in question. – vvr02 Oct 16 '12 at 11:47
Sorry for troubling still having same problem. Image disappearing. – vvr02 Oct 16 '12 at 12:09
Try without the line ctx.translate(-translateX,-translateY); – MJQ Oct 16 '12 at 12:10
Ok. Wait. Lemme try it. Then i will tell! – MJQ Oct 16 '12 at 12:15
@MJQ you shouldn't edit the OP's post to fix his/her code. You need to edit your own answer for that. Editing the OP is solely for the purpose of fixing minor mistakes and grammar. – Eonasdan Oct 16 '12 at 12:26
Now i tried with big image the rotation is not happened but the 3/4th of the image is disappeared............ – vvr02 Oct 16 '12 at 12:28
Above code is correct. Error is coming in where translateX and translateY are being initialized. They are getting wrong or no values. TranslateX should be canvaswidth/2 and translateY should be canvasheight/2. I have tested it at my side and working perfect. – MJQ Oct 16 '12 at 12:30
Ok. I got the issue. You are getting context and in clear rect it is cleared and when drawn it is empty. So, have to use two context variables. I am editing my code above. Hope it will work fine now! – MJQ Oct 16 '12 at 12:38
Any way i came close now. I will check where i was wrong and update the solution. Thanks a lot for helping me. – vvr02 Oct 16 '12 at 12:39
Image rotation is working now but the image aspect ration if not 1:1 the previous is coming like a background. updated screen shot in question. – vvr02 Oct 16 '12 at 12:54
I knew that would happen. It is due to not clearing previous drawing. Ok. Here comes another edit. – MJQ Oct 16 '12 at 12:56
I tried like this for avoiding that but no use // Setting the height and width of the image $("#preview").attr("height", $("#preview").height()); $("#preview").attr("width", $("#preview").width()); – vvr02 Oct 16 '12 at 13:00
Just give the original image in drawImage after clearing. i.e, in place of canvasId give the original image that was drawn initially. I edited the code. – MJQ Oct 16 '12 at 13:24
if i give the original image id rotation is happening single time only and also not clearing the previous image. – vvr02 Oct 16 '12 at 13:28
Have you added the line ctx.clearRect(0, 0, $("#preview").width(), $("#preview").height()); – MJQ Oct 16 '12 at 14:05
2

thanks a lot MJQ. You saved my lot of headache. After adding the lines ctx.save(); & ctx.restore(); it worked. – vvr02 Oct 17 '12 at 06:48
MJQ it is lot simpler than what we did here is the link http://phptechworld.blogspot.in/2012/10/html5-canvas-image-rotation.html – vvr02 Oct 18 '12 at 08:18
It is not a dynamic code. i have given you dynamic one. You can rotate 1-360 degree in my code by just changing r values. So still easier! – MJQ Oct 18 '12 at 09:56

score 0 · Answer 2 · answered Oct 18 '12 at 08:17

0

As i verified in the net it is lot simpler than what we did in the above process.

So here is the link which i have posted in my blog HTML5 canvas image rotation

answered Oct 18 '12 at 08:17

vvr02

611
2
12
22

HTML5 canvas image rotate left rotate right

2 Answers2

Linked