EN
JavaScript - flip canvas horizontally
0 points
In this article, we would like to show you how to flip canvas horizontally using JavaScript.
Quick solution:
xxxxxxxxxx
1
var canvas = document.querySelector('#my-canvas');
2
var context = canvas.getContext('2d');
3
4
context.scale(-1, 1); // <--- flip horizontally
5
6
context.font = '55px Arial';
7
context.fillText('text', -100, 50);
Note:
The x-coordinates of all points inside the
canvas
are negative now.
In this example, we use scale()
method with negative x coordinate to flip the text on canvas horizontally.
xxxxxxxxxx
1
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="110" height="65"></canvas>
12
<script>
13
14
var canvas = document.querySelector('#my-canvas');
15
var context = canvas.getContext('2d');
16
17
context.scale(-1, 1); // <--- flip horizontally
18
19
context.font = '55px Arial';
20
context.fillText('text', -100, 50);
21
22
</script>
23
</body>
24
</html>