HTML5 canvas cung cấp phương thức cho phép sửa đổi trực tiếp ma trận biến đổi. Ma trận biến đổi ban đầu phải là identity transform. Sau đó có thể điều chỉnh dùng phương thức biến đổi.
Phương thức transform (m11, m12, m21, m22, dx, dy) phải nhân ma trận biến đổi hiện tại với ma trận mô tả bởi −
m11 m21 dx m12 m22 dy 0 0 1
Phương thức setTransform(m11, m12, m21, m22, dx, dy) phải reset biến đổi hiện tại về ma trận đơn vị, sau đó gọi transform với cùng tham số.
<!DOCTYPE HTML> <html> <head> <script> function drawShape(){ // lấy phần tử canvas dùng DOM var canvas = document.getElementById('mycanvas'); // Đảm bảo không chạy khi canvas không hỗ trợ if (canvas.getContext){ // dùng getContext để dùng canvas vẽ var ctx = canvas.getContext('2d'); var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (var i=0; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; ctx.fillRect(0, 0, 100, 100); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.fillStyle = "rgba(100, 100, 255, 0.5)"; ctx.fillRect(50, 50, 100, 100); } else { alert('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.'); } } </script> </head> <body onload="drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html>