Rotating an Image on Canvas in HTML 5

Rotating an Image on a Canvas using HTML5

In this article describe 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 setting 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 a 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 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="">


    <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 surfaceContext = surface.getContext('2d');


            // Clear the canvas to White

            surfaceContext.fillStyle = "rgb(255,255,255)";

            surfaceContext.fillRect(0, 0, surface.width, surface.height);


            // Save the current context


            // Translate to the center point of our image

            surfaceContext.translate(image.width * 0.5, image.height * 0.5);

            // Perform the rotation


            // 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






        function DegToRad(d)


            // Converts degrees to radians

            return d * 0.01745;



    <title>Rotating an inage on canvas<title>


<body onload="drawCanvas();">


        <canvas id="myCanvas" width="30" height="30">

            <p>Your browser doesn't support canvas.</p>











Up Next
    Ebook Download
    View all
    View all