พื้นฐาน HTML Canvas

เพื่อวาดกราฟิกบนหน้าเว็บ ใช้องค์ประกอบ <canvas> ของ HTML5 แท็ก <canvas> อนุญาตให้วาดกราฟิกได้ด้วย JavaScript — เส้น, สี่เหลี่ยม, คอนทรัคโครนิค (Bezier curves), วงกลม, รูปทรงต่างๆ และภาพ

ทุก canvas มี 2 แอตทริบิวต์หลักกำหนดขนาด:

• width — ความกว้าง (พิกเซล)
• height — ความสูง (พิกเซล)

ควรกำหนด id เพื่อเข้าถึงได้ง่าย:

<canvas id="newCanvas" width="100" height="100"></canvas>

ขั้นตอนการวาด

1. หา <canvas> element ใน DOM ด้วย getElementById()
2. เข้าถึง rendering context ผ่านเมธอด getContext('2d')
3. ใช้ฟังก์ชันวาดของ context (ctx) เพื่อวาดรูปทรง

var canvas = document.getElementById("newCanvas");
var ctx = canvas.getContext("2d");

ตัวอย่าง 1: วาดหน้าสมาย (Smiley Face)

<!DOCTYPE HTML>
<html>
<head>
<style>
  #test {
    width: 100px;
    height: 100px;
    margin: 0px auto;
    background-color: orange;
  }
</style>
<script>
  function drawShape() {
    var canvas = document.getElementById('mycanvas');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      // วาดรูปทรง
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true);  // วงกลมนอก (หน้า)
      ctx.moveTo(110, 75);
      ctx.arc(75, 75, 35, 0, Math.PI, false);      // ปาก
      ctx.moveTo(65, 65);
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true);    // ตาซ้าย
      ctx.moveTo(95, 65);
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true);    // ตาขวา
      ctx.stroke();
    } else {
      alert('เบราว์เซอร์ไม่รองรับ Canvas');
    }
  }
</script>
</head>
<body id="test" onload="drawShape()">
<canvas id="mycanvas"></canvas>
</body>
</html>

ตัวอย่าง 2: วาดโค้งกำลังสอง (Quadratic Curve)

<!DOCTYPE HTML>
<html>
<head>
<style>
  #test {
    width: 100px;
    height: 100px;
    margin: 0px auto;
  }
</style>
<script type="text/javascript">
  function drawShape() {
    var canvas = document.getElementById('mycanvas');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(75, 25);
      ctx.quadraticCurveTo(25, 25, 25, 62.5);
      ctx.quadraticCurveTo(25, 100, 50, 100);
      ctx.quadraticCurveTo(50, 120, 30, 125);
      ctx.quadraticCurveTo(60, 120, 65, 100);
      ctx.quadraticCurveTo(125, 100, 125, 62.5);
      ctx.quadraticCurveTo(125, 25, 75, 25);
      ctx.stroke();
    } else {
      alert('เบราว์เซอร์ไม่รองรับ Canvas');
    }
  }
</script>
</head>
<body id="test" onload="drawShape()">
<canvas id="mycanvas"></canvas>
</body>
</html>

เมธอด Canvas 2D Context สำคัญ

หมายเหตุ: Canvas ต้องการ JavaScript เพื่อทำงาน — ไม่มีเนื้อหา fallback ภายในแท็ก canvas (ข้อความภายในจะแสดงเฉพาะเมื่อเบราว์เซอร์ไม่รองรับ canvas)