HTML5 Canvas có hai phương thức để lưu và trả về trạng thái trước đó là save() và restore(). Chúng ta cứ hình dung như save() dùng để đánh dấu các vạch, restore() dùng để quay về vạch trước đó một hoặc nhiều lần. Nếu chưa hiểu bạn có thể xem ví dụ minh họa bên dưới để dể hiểu hơn nhé:

Cú pháp:

1
2

context.save();
context.restore();

Ví dụ minh họa:

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var rectWidth = 150;
    var rectHeight = 75;
 
    context.save(); // lưu state 1      //(trạng thái lúc này chỉ mới khởi tạo width và height

    // di chuyển điểm vẽ ra giữa canvas     context.translate(canvas.width / 2, canvas.height / 2); 
    context.save(); // lưu state 2     // trạng thái lúc này đã di chuyển vào giữ 
    context.rotate(Math.PI / 4); //quay một góc PI/4 
    context.save(); // lưu state 3

    // trạng thái lúc này đã quay 
    context.scale(2, 2); //phóng to gấp 2 lần    
         
    context.fillStyle = "blue";
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
 
    context.restore(); // Trả về trạng thái state 3 (không có scale)
    context.fillStyle = "red";
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
 
    context.restore(); // Trả vè trạng thái 2 (không quay)
    context.fillStyle = "yellow";
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
 
    context.restore(); // trả về trạng thái 1 (chưa vào tâm canvas)
    context.fillStyle = "green";
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
};