HTML5 Canvas Cookbook

Creating a mirror transform

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.

How to do it...

Follow these steps to write text backwards:

1. Define the canvas context:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");

2. 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 ...