เมธอด rect() ของ HTML Canvas: สร้างเส้นทางสี่เหลี่ยมผืนผ้า

ไวยากรณ์ (Syntax)

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

พารามิเตอร์

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

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

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // สี่เหลี่ยมใหญ่ สีส้ม
    ctx.beginPath();
    ctx.rect(100, 60, 200, 200);
    ctx.fillStyle = "orange";
    ctx.fill();
    
    // สี่เหลี่ยมเล็กในตัว สีเหลือง
    ctx.beginPath();
    ctx.rect(110, 90, 180, 120);
    ctx.fillStyle = "yellow";
    ctx.fill();
  </script>
</body>
</html>

ผลลัพธ์

จะเห็นสี่เหลี่ยมสีส้มขนาดใหญ่ และสี่เหลี่ยมสีเหลืองขนาดเล็กอยู่ตรงกลาง (สร้างเอฟเฟกต์กรอบ)

ความแตกต่างระหว่าง rect() และ fillRect()

เมื่อไหร่ควรใช้ rect()?

• ต้องการรวมสี่เหลี่ยมหลายรูปใน Path เดียวกัน
• ต้องการใช้ clip() หรือ isPointInPath()
• ต้องการควบคุมการวาดแบบละเอียด (stroke แยก fill แยก)