Languages
[Edit]
EN

JavaScript - rotate image on canvas

6 points
Created by:
lena
624

In this article, we would like to show you how to rotate image on HTML canvas element using JavaScript.

Quick solution:

function drawRotated(context, image, imageX, imageY, degrees) {
    context.save();
  	context.translate(imageX, imageY);
    context.rotate(0.017453292519943295 * degrees);  // 0.017453292519943295 == Math.PI / 180
    context.drawImage(image, -0.5 * image.width, -0.5 * image.width);
    context.restore();
}


// Usage example:

var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');

var degrees = 45;  // clockwise rotation

var image = new Image();
image.onload = function() {
    drawRotated(context, image, 150, 150, degrees);  // image center in x=150, y=150
};
image.src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';

 

Practical example

In this example, we rotate image around image center.

Image rotation around image center using JavaScript.
Image rotation around image center using JavaScript.

Source code:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="300" height="300"></canvas>
  <script>

    function drawRotated(context, image, imageX, imageY, degrees) {
        context.save();
      	context.translate(imageX, imageY);
        context.rotate(0.017453292519943295 * degrees);  // 0.017453292519943295 == Math.PI / 180
        context.drawImage(image, -0.5 * image.width, -0.5 * image.width);
        context.restore();
    }


    // Usage example:

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    var degrees = 45;  // clockwise rotation

    var image = new Image();
    image.onload = function() {
        drawRotated(context, image, 150, 150, degrees);  // image center in x=150, y=150
    };
    image.src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';

  </script>
</body>
</html>

 

Advanced solution

Usually, when we rotate images we think about rotation around some point. Using math theorem, image rotation around some point requires 3 transformations: translation, rotation, and translation.

We can write it in a more clear way: T = T1 * R1 * T2

We should read transformations starting from right side, so:

  • T2 - means rotation point translation to (0, 0),
  • R1 - means rotation around point (0, 0),
  • T1 - means translation back to beginning position,
  • T - means final transformations composition required to do rotation around some point.

In this example, we create three functions.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="600" height="600"></canvas>
  <script>

    var RADIAN = Math.PI / 180;

    function toRadians(degrees) {
        return degrees * RADIAN;
    }
    
    // Draws image in indicated position rotated around origin point (originX, originY).
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = imageX + image.width / 2;
    //     originY = imageY + image.height / 2;
    //
    function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {
        var radians = toRadians(degrees);
        context.save();                            // saves current transformation matrix (state)
      	context.translate(+originX, +originY);
        context.rotate(radians);                   // rotates the image around origin point by used translations
        context.translate(-originX, -originY);
        context.drawImage(image, imageX, imageY);  // draws the image in the position (imageX, imageY)
        context.restore();                         // restores saved transformation matrix (state)
    }
    
    // Draws image in indicated position rotated around relative origin point (originX, originY).
    // Origin point is measured from let-top image corner.
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = image.width / 2;
    //     originY = image.height / 2;
    //
    function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {
        drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);
    }
    
    // Draws image in indicated position rotated around image center.
    //
    function drawRotated$3(context, image, imageX, imageY, degrees) {
        // we rotate image around image center (0.5 * image.width, 0.5 * image.height)
        var originX = 0.5 * image.width;
        var originY = 0.5 * image.height;
        drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);
    }
    

    // Usage example:

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');
    
    var image = new Image();

    image.onload = function() {
        var degrees = 0;
        var callback = function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // image placed in point (50, 50) and rotated around his center
            drawRotated$3(context, image, 50, 50, degrees);
            
            // image placed in point (450, 150) and rotated around left-top corner - point (0, 0) on the image
            drawRotated$2(context, image, 450, 150, 0, 0, degrees);
           
            // image placed in point (200, 400) and rotated around point (300, 300)
            drawRotated$1(context, image, 200, 400, 300, 300, degrees);
           
            degrees += 1;
        };
        setInterval(callback, 10);
    };

    image.src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';

  </script>
</body>
</html>

 

See also

  1. JavaScript - animate image rotation (rotation around: image center, image let-top corner, indicated point)

References

  1. clearRect() - Web APIs | MDN
  2. save() - Web APIs | MDN
  3. translate() - Web APIs | MDN
  4. rotate() - Web APIs | MDN
  5. drawImage() - Web APIs | MDN
  6. restore() - Web APIs | MDN

Alternative titles

  1. JavaScript - rotate image on HTML canvas element
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

JavaScript - HTML5 canvas tutorial

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join