HTML5 canvas drawImage with at an angle

javascript html drawimage
Greg picture Greg · Sep 25, 2010 · Viewed 52.7k times · Source

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

Jakub Wieczorek picture Jakub Wieczorek · Sep 25, 2010

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.

Related questions

How to draw photo with correct orientation in canvas after capture photo by using input[type='file'] in mobile web browser?

I am making a simple web app in mobile which allow visitor to capture photo by using html5 input[type=file] element. Then I will display it on the web for preview, and then visitor can choose to upload the …

Read More
Drawing image on canvas - larger than real

I want to draw an image from jpg file on canvas. My code: var canvas = document.getElementById('my_canvas'); var ctx = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = 'img/my_image.…

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More