Rotate image by 90 degrees on HTML5 Canvas

Question

I am having trouble rotating an image using an HTML5 canvas. I suppose that I just have the math wrong, and would appreciate any help in getting this right.

On a mobile device I am capturing a user signature on a 150px by 558px canvas. I am than attempting to create a 558px by 150px image that is just the captured signature rotated 90 degrees. Below is a snippet of the code I've currently come up with. As you can likely surmise, I do not have a good grip on the math going into this. I believe I have the procedure correct, just not the numbers.

What I'm trying to do is: 1) set the center of the canvas to the middle, offsetting by the height and width of my image 2) rotate the canvas by 90 degrees 3) draw the image 4) translate the canvas back.

EDIT: Here's a JSFiddle: http://jsfiddle.net/x9FyK/

    var $signature = $("#signature");
    var signatureData = $signature.jSignature("getData");

    console.log(signatureData);

    var img= new Image();
    img.onload = function() {
        var rotationCanvas = document.createElement('canvas');
        rotationCanvas.width = img.height;
        rotationCanvas.height = img.width;

        var context = rotationCanvas.getContext("2d");
        context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4);

        context.rotate(Math.PI/2);
        context.drawImage(img,0,0);
        context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4));
        var rotatedData = rotationCanvas.toDataURL();

        ...Handling rotated data here

    };
    img.src = signatureData;

If I can provide any more information, please let me know.

Thanks in advance for your help,

I've edited the post with the fiddle: http://jsfiddle.net/x9FyK/ — user3582127, Apr 28 '14 at 16:46

markE · Accepted Answer · 2014-04-28T17:08:47.173

There are several ways of resetting a transformed (translated+rotated) canvas back to its original state.

Low-Pointer's answer is using context.save to save the context in is original un-transformed state and using context.restore to restore the context to its original state after the drawing is done.

The other way it to undo your transforms in the reverse order that they were performed.

Also, note that context.translate will actually move the canvas origin to the center of the canvas. Since images are drawn from their top-left (not their center), you must offset drawImage by half the image width and height if you want the image centered in the canvas.

Here's and example: http://jsfiddle.net/m1erickson/EQx8V/

// translate to center-canvas 
// the origin [0,0] is now center-canvas

ctx.translate(canvas.width/2,canvas.height/2);

// roate the canvas by +90% (==Math.PI/2)

ctx.rotate(Math.PI/2);

// draw the signature
// since images draw from top-left offset the draw by 1/2 width & height

ctx.drawImage(img,-img.width/2,-img.height/2);

// un-rotate the canvas by -90% (== -Math.PI/2)

ctx.rotate(-Math.PI/2);

// un-translate the canvas back to origin==top-left canvas

ctx.translate(-canvas.width/2,-canvas.height/2);

// testing...just draw a rect top-left

ctx.fillRect(0,0,25,10);

enter image description here

score 5 · Answer 2 · edited May 23 '17 at 11:47

this will surely help you >>HTML5 Canvas Rotate Image :)

use some SEPARATE js function for drawing your canvas :

 function drawRotated(degrees){
     contex_var.clearRect(0,0,canvas.width,canvas.height);
     contex_var.save();
     contex_var(canvas.width/2,canvas.height/2);
     contex_var.rotate(degrees*Math.PI/180);
     contex_var.drawImage(image,-image.width/2,-image.width/2);
     contex_var.restore();
          }

Suppy some angle to any buttonclick function:

$("#clockwise").click(function(){ 
    angleInDegrees+=30;
    drawRotated(angleInDegrees);
});

Rotate image by 90 degrees on HTML5 Canvas

2 Answers2