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:
xxxxxxxxxx1
function drawRotated(context, image, imageX, imageY, degrees) {2
context.save();3
context.translate(imageX, imageY);4
context.rotate(0.017453292519943295 * degrees); // 0.017453292519943295 == Math.PI / 1805
context.drawImage(image, -0.5 * image.width, -0.5 * image.width);6
context.restore();7
}8
9
10
// Usage example:11
12
var canvas = document.querySelector('#my-canvas');13
var context = canvas.getContext('2d');14
15
var degrees = 45; // clockwise rotation16
17
var image = new Image();18
image.onload = function() {19
drawRotated(context, image, 150, 150, degrees); // image center in x=150, y=15020
};21
image.src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';
In this example, we rotate image around image center.
Source code:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="300" height="300"></canvas>12
<script>13
14
function drawRotated(context, image, imageX, imageY, degrees) {15
context.save();16
context.translate(imageX, imageY);17
context.rotate(0.017453292519943295 * degrees); // 0.017453292519943295 == Math.PI / 18018
context.drawImage(image, -0.5 * image.width, -0.5 * image.width);19
context.restore();20
}21
22
23
// Usage example:24
25
var canvas = document.querySelector('#my-canvas');26
var context = canvas.getContext('2d');27
28
var degrees = 45; // clockwise rotation29
30
var image = new Image();31
image.onload = function() {32
drawRotated(context, image, 150, 150, degrees); // image center in x=150, y=15033
};34
image.src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';35
36
</script>37
</body>38
</html>
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.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="600" height="600"></canvas>12
<script>13
14
var RADIAN = Math.PI / 180;15
16
function toRadians(degrees) {17
return degrees * RADIAN;18
}19
20
// Draws image in indicated position rotated around origin point (originX, originY).21
// Hint: when we want to rotate around image center point, origin point should be:22
// originX = imageX + image.width / 2;23
// originY = imageY + image.height / 2;24
//25
function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {26
var radians = toRadians(degrees);27
context.save(); // saves current transformation matrix (state)28
context.translate(+originX, +originY);29
context.rotate(radians); // rotates the image around origin point by used translations30
context.translate(-originX, -originY);31
context.drawImage(image, imageX, imageY); // draws the image in the position (imageX, imageY)32
context.restore(); // restores saved transformation matrix (state)33
}34
35
// Draws image in indicated position rotated around relative origin point (originX, originY).36
// Origin point is measured from let-top image corner.37
// Hint: when we want to rotate around image center point, origin point should be:38
// originX = image.width / 2;39
// originY = image.height / 2;40
//41
function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {42
drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);43
}44
45
// Draws image in indicated position rotated around image center.46
//47
function drawRotated$3(context, image, imageX, imageY, degrees) {48
// we rotate image around image center (0.5 * image.width, 0.5 * image.height)49
var originX = 0.5 * image.width;50
var originY = 0.5 * image.height;51
drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);52
}53
54
55
// Usage example:56
57
var canvas = document.querySelector('#my-canvas');58
var context = canvas.getContext('2d');59
60
var image = new Image();61
62
image.onload = function() {63
var degrees = 0;64
var callback = function () {65
context.clearRect(0, 0, canvas.width, canvas.height);66
67
// image placed in point (50, 50) and rotated around his center68
drawRotated$3(context, image, 50, 50, degrees);69
70
// image placed in point (450, 150) and rotated around left-top corner - point (0, 0) on the image71
drawRotated$2(context, image, 450, 150, 0, 0, degrees);72
73
// image placed in point (200, 400) and rotated around point (300, 300)74
drawRotated$1(context, image, 200, 400, 300, 300, degrees);75
76
degrees += 1;77
};78
setInterval(callback, 10);79
};80
81
image.src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';82
83
</script>84
</body>85
</html>
