EN
JavaScript - rotate image on canvas
6
points
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.
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>