Another interesting use of the scale transformation is its ability to mirror the canvas context vertically or horizontally. In this recipe, we'll mirror the canvas context horizontally, and then write out some backwards text.
Follow these steps to write text backwards:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
Translate the canvas context and then flip the context horizontally using a negative
x
value:// translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // flip context horizontally context.scale(-1, 1);
Write "Hello World!":
context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "blue"; context.fillText("Hello World!", 0, 0); };
Embed the canvas tag into the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style...