Lưu và khôi phục trạng thái (state) HTML5 Canvas

Canvas API cung cấp 2 phương thức quản lý stack trạng thái vẽ: save() và restore().

Các trạng thái được lưu (state stack)

• Transformations: translate, rotate, scale, transform, setTransform.
• Styles: fillStyle, strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, font, textAlign, textBaseline, globalAlpha, globalCompositeOperation.
• Shadow: shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY.
• Clipping region: clip path.
• KHÔNG lưu: Bitmap pixels (nội dung đã vẽ), current path.

Phương thức

Ví dụ minh họa: Lồng nhiều save/restore

<!DOCTYPE HTML>
<html>
  <head>
    <style> #test { width: 100px; height: 100px; margin: 0 auto; } </style>
    <script>
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');

          // 1. Vẽ hình chữ nhật lớn mặc định (mặc định: fillStyle black)
          ctx.fillRect(0, 0, 150, 150);

          // 2. Lưu trạng thái mặc định
          ctx.save();

          // 3. Thay đổi style, vẽ hình vuông nhỏ hơn
          ctx.fillStyle = '#66FFFF';
          ctx.fillRect(15, 15, 120, 120);

          // 4. Lưu trạng thái mới (cyan)
          ctx.save();

          // 5. Thay đổi tiếp: đỏ + trong suốt 0.5
          ctx.fillStyle = '#993333';
          ctx.globalAlpha = 0.5;
          ctx.fillRect(30, 30, 90, 90);

          // 6. Khôi phục về trạng thái cyan (bước 4)
          ctx.restore();
          // Vẽ hình vuông với style cyan (từ bước 3)
          ctx.fillRect(45, 45, 60, 60);

          // 7. Khôi phục về trạng thái mặc định (bước 2)
          ctx.restore();
          // Vẽ hình vuông với style mặc định (đen)
          ctx.fillRect(40, 40, 90, 90);
        }
      }
    </script>
  </head>
  <body id="test" onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>

Pattern phổ biến

ctx.save();
// ... thay đổi transform, style ...
// ... vẽ thứ gì đó ...
ctx.restore(); // quay về trạng thái trước save()

Luôn dùng cặp save()/restore() khi áp dụng transform/style tạm thời cho một phần vẽ cụ thể.