Để lật ngược hình (mirror transform) trong HTML5 Canvas chúng ta sử dụng scale với giá trị offsetX hoặc offsetY là -1.

1
2
3
4
5

// Lật ngược theo chiều ngang
context.scale(-1,1);
 
// lật ngược theo chiều dọc
context.scale(1,-1);

Ví dụ minh họa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // đưa điểm tâm chỉ tới giữa canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    // quay context ngược theo chiều dọc
    context.scale(-1, 1);
 
    context.font = "30pt Calibri";
    context.textAlign = "center";
    context.fillStyle = "blue";
    context.fillText("Hello World!", 0, 0);
};