วิธีวาดสี่เหลี่ยมผืนผ้าบน HTML5 Canvas

บทนำ

ใช้เมธอด fillRect(x, y, width, height) เพื่อวาดสี่เหลี่ยมผืนผ้าเติมสีบน Canvas โดยที่:

• x, y = พิกัดมุมซ้ายบน
• width, height = ความกว้างและความสูง

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Rectangle</title>
  </head>
  <body>
    <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#7cce2b';
      ctx.fillRect(0, 0, 300, 100);
    </script>
  </body>
</html>

เมธอดเพิ่มเติม

• strokeRect(x, y, w, h) - วาดกรอบสี่เหลี่ยม (ไม่เติมสี)
• clearRect(x, y, w, h) - ล้างพื้นที่สี่เหลี่ยม (ทำให้โปร่งใส)