javascript - Rotate image by 90 degrees on HTML5 Canvas -

I'm having trouble moving an image using the HTML5 canvas. I think my mistake is wrong, and appreciate any help in getting it right.

On mobile devices, I am capturing a user signature at 150px by 558 px canvas. I am trying to create a 558px 150px image which has only been captured the signed 90 degree rotation. Below I am a snippet of code that I am currently working with. As you can guess, I have no good grip on this math. I believe that I have the process right, not just numbers.

What I am trying to do: 1) Set the center of the canvas in center, offset the height and width of my image 2) Rotate the canvas by 90 degrees 3) Drag the image 4) Canvas Translate

Edit: Here's a JSFiddle:

  Var $ sign = $ ("#signature"); Var signaturedata = $ signature.jSignature ("getData"); Console.log (signatureData); Var img = new image (); Img.onload = function () {var rotationCanvas = document.createElement ('canvas'); Rotationcanvas.wind = img.height; Rotation canvas Het = img Wide; Var Reference = RotationCanvas.Get Context ("2D"); Context.translate ((rotationCanvas.width / 2) - (img.width / 2), - (RotationCanv.Hight / 2) - IMG Highlight / 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 (); ... to handle rotated data here}; Img.src = signature data;  

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

Thank you in advance for your help,

A conversion (translated + rotated) ) There are several ways to reset the canvas to its original state.

Using context.save to save the answer to the lower pointer in the original is in the un-converted state and by using the context. After referencing the context to restore its original position.

In other ways it is done to undo the change in your reverse order.

Also, note that the reference. Translatates will actually move the origin of the canvas to the center of the canvas. Since the images are drawn from their top-left (not in their center), if you want to focus the image in the canvas, you have to offset the image line according to the diagram image width and height.

More examples here:

  // Translate to the center-canvas / root [0,0] Now center-canvas CTX. Translestate (canvas.wind / 2, canvas. Light / 2); // Canvas 90% (== Math.PI / 2) CTX. Hate with rotate (Math.PI / 2); // Draw the signature // Draw images from the top-left draw width of 1/2 in width & amp; Height ctx.drawImage (IMG, -img.width / 2, -img.height / 2); // Non-rotate canvas-90% (== -Math.PI / 2) ctx.rotate (-Math.PI / 2); // Do not translate the canvas back to Genesis == Top-left canvas CTX.Translate (-Canvas.Wind / 2 -CainusHight / 2); // test ... just draw a top top left ctx.fillRect (0,0,25,10);