เมธอด clearRect() ของ HTML Canvas: ล้างพิกเซลในพื้นที่สี่เหลี่ยม

เมธอด clearRect() คืออะไร?

เมธอด clearRect() ของ HTML Canvas ใช้สำหรับ ล้างพิกเซล ในพื้นที่สี่เหลี่ยมผืนผ้าที่กำหนด ทำให้พื้นที่นั้นกลายเป็นโปร่งใส (Transparent) เมธอดนี้เป็นส่วนหนึ่งของ Canvas 2D Context

ไวยากรณ์ (Syntax)

ctx.clearRect(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 blue;"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // วาดพื้นหลังสีเทาเต็ม Canvas
    ctx.fillStyle = "gray";
    ctx.fillRect(0, 0, 500, 350);
    
    // ล้างพื้นที่สี่เหลี่ยมตรงกลาง
    ctx.clearRect(250, 100, 50, 100);
  </script>
</body>
</html>

ผลลัพธ์

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

การประยุกต์ใช้

• สร้างเอฟเฟกต์ "ยางลบ" ในแอปวาดรูป
• ล้างเฟรมก่อนวาดเฟรมใหม่ในอนิเมชัน
• สร้างรูปร่างโดยการลบพื้นที่จากสีเต็ม