Phương thức fillRect() của Canvas HTML

Giới thiệu

Phương thức fillRect() vẽ một hình chữ nhật tô đặc (filled rectangle) trên canvas. Mặc định màu đen. Kết hợp với fillStyle để đổi màu. Khác với rect() chỉ tạo đường dẫn, fillRect() vẽ và tô ngay.

Cú pháp

context.fillRect(x, y, width, height);

• x: Tọa độ x góc trên trái.
• y: Tọa độ y góc trên trái.
• width: Chiều rộng.
• height: Chiều cao.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 500, 350); // Tô toàn bộ canvas xanh dương
    ctx.clearRect(250, 100, 50, 100); // Xóa một vùng nhỏ
  </script>
</body>
</html>

Kết quả hiển thị

Canvas nền xanh dương với một vùng chữ nhật trong suốt ở giữa.