HTML5 canvas drawImage with at an angle

Question

I am experimenting with animation in <canvas> and can't work out how to draw an image at an angle. The desired effect is a few images drawn as usual, with one image rotating slowly. (This image is not at the centre of the screen, if that makes any difference).

Answer 1

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.

Answer 2

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=100 rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );