Rotating an Image on Canvas in HTML 5

Rotating an Image on a Canvas using HTML5

This article describes how to rotate images using JavaScript and HTML5.

It's not as simple as just "rotating an image". It's more like rotating the canvas, then set the image's orientation, then resetting the canvas.

In this example, I will show how to rotate an image around its center point in HTML5.

NOTE: It is important to remember that in canvas, the last transformation that you write is executed first. So if you are doing many transformations then you must write them in reverse order.

Step 1

Load the image using the following:

Specify an image to be loaded image = new Image();
Some onload event handler after it has loaded image.onload = loadingComplete; image.src = "C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg";

Note: To check that the image has loaded completly:

image.readyState == 'complete'

Step 2-

Since I created the canvas dynamically, ensure to insert it into the document before calling: "canvas.getContext('2d');".

Step 3

So first save the canvas as it is.
Then the translate line makes the "start" to translate to the center point of our image.
Then perform the rotation of the actual canvas the amount you want the image to rotate.
Finally, we draw the image, but because the start of the image has changed place, it needs to start drawing at a different place; which is half of the width of the image to the left, and half of the height of the image from the top.
It then brings the canvas back to where it was before, leaving the drawn image still showing as rotated.
At last, we restore the content and ready for the next loop.

Example :

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="application/javascript">
var surface;
var image;
var angle = 0;
function drawCanvas()
{
// Get our Canvas element
surface = document.getElementById("myCanvas");
if (surface.getContext)
{
// If Canvas is supported, load the image
image = new Image();
image.onload = loadingComplete;
image.src = "C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg";
}
}
function loadingComplete(e)
{
// When the image has loaded begin the loop
setInterval(loop, 25);
}
function loop()
{
// Each loop we rotate the image
var surfacesurfaceContext = surface.getContext('2d');
// Clear the canvas to White
surfaceContext.fillStyle = "#ffffff";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Save the current context
surfaceContext.save();
// Translate to the center point of our image
surfaceContext.translate(image.width * 0.5, image.height * 0.5);
// Perform the rotation
surfaceContext.rotate(DegToRad(angle));
// Translate back to the top left of our image
surfaceContext.translate(-image.width * 0.5, -image.height * 0.5);
// Finally we draw the image
surfaceContext.drawImage(image, 0, 0);
// And restore the context ready for the next loop
surfaceContext.restore();
angle++;
}
function DegToRad(d)
{
// Converts degrees to radians
return d * 0.01745;
}
</script>
<title>Rotating an inage on canvas<title>
</head>
<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="30" height="30">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>

Output