เมธอด fillRect() ของ HTML Canvas: วาดสี่เหลี่ยมทาสีเต็ม

ไวยากรณ์ (Syntax)

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

พารามิเตอร์

• x: พิกัด X มุมซ้ายบน
• y: พิกัด Y มุมซ้ายบน
• width: ความกว้าง
• height: ความสูง

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="500" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // ทาสีพื้นหลังสีน้ำเงินเต็ม Canvas
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 500, 350);
    
    // ล้างพื้นที่ตรงกลาง (ทำให้โปร่งใส)
    ctx.clearRect(250, 100, 50, 100);
  </script>
</body>
</html>

ผลลัพธ์

Canvas สีน้ำเงินเต็มจอ มีช่องว่างโปร่งใสสี่เหลี่ยมอยู่ตรงกลาง (x=250, y=100, w=50, h=100)

ความแตกต่าง fillRect() vs rect() + fill()

เมธอดสี่เหลี่ยมครบชุด

• fillRect(x, y, w, h) - ทาสีเต็ม
• strokeRect(x, y, w, h) - วาดขอบเท่านั้น
• clearRect(x, y, w, h) - ล้างพิกเซล (โปร่งใส)
• rect(x, y, w, h) - สร้าง path สี่เหลี่ยม (ต้อง fill/stroke ต่อ)