HTML5 canvas drawImage with at an angle
You need to modify the transformation matrix before drawing the image that you want rotated.
Assume image points to an HTMLImageElement object.
var x = canvas.width / 2;var y = canvas.height / 2;var width = image.width;var height = image.height;context.translate(x, y);context.rotate(angleInRadians);context.drawImage(image, -width / 2, -height / 2, width, height);context.rotate(-angleInRadians);context.translate(-x, -y);
The x, y coordinates is the center of the image on the canvas.
I have written a function (based on Jakub's answer) that allows user to paint an image in a X,Y position based on a custom rotation in a custom rotation point:
function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) { context.translate( positionX, positionY ); context.rotate( angleInRad ); context.drawImage( image, -axisX, -axisY ); context.rotate( -angleInRad ); context.translate( -positionX, -positionY );}
Then you can call it like this:
var TO_RADIANS = Math.PI/180; ctx = document.getElementById("canvasDiv").getContext("2d");var imgSprite = new Image();imgSprite.src = "img/sprite.png";// rotate 45ยบ image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );
It is interesting that the first solution worked for so many people, it didn't give the result I needed.In the end I had to do this:
ctx.save();ctx.translate(positionX, positionY);ctx.rotate(angle);ctx.translate(-x,-y);ctx.drawImage(image,0,0);ctx.restore();
where (positionX, positionY)
is the coordinates on the canvas that I want the image to be located at and (x, y)
is the point on the image where I want the image to rotate.