Để scale trong HTML5 Canvas chúng ta dùng phương thức scale(). Phương thức này được định nghĩa với hai tham số scale x và scale y.

Cú pháp:

1

context.scale(scaleX,scaleY);

Ví dụ về HTML5 Canvas Scale

Javascript:

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

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var rectWidth = 150;
    var rectHeight = 75;
 
    // Chỉ điểm vẽ về giữa canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    // scale hình nhỏ xuống 50% chiều cao (trục y).
    context.scale(1, 0.5);
 
    context.fillStyle = "blue";
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
};