EN
JavaScript - flip canvas both vertically and horizontally
0
points
In this article, we would like to show you how to flip canvas vertically and horizontally at once using JavaScript.
Quick solution:
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
context.scale (-1, -1); // <--- flip context
context.font = '55px Arial';
context.fillText('text', -100, -15);
Note:
The coordinates of all points inside the
canvasare negative now.
Practical example
In this example, we use scale() method with negative coordinates to flip the text on canvas vertically and horizontally at once.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="110" height="65"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
context.scale (-1, -1); // <--- flip context
context.font = '40pt Arial';
context.fillText('text', -100, -15);
</script>
</body>
</html>