HTML Canvas stroke() Method - วาดเส้นทาง (Path) บน Canvas

เมธอด stroke() ของ Canvas 2D Context ใช้ **วาดเส้นขอบ (outline)** ของเส้นทาง (path) ที่สร้างขึ้นด้วย moveTo(), lineTo(), arc(), bezierCurveTo() เป็นต้น

รูปแบบการใช้งาน

ctx.stroke(); // วาดเส้นขอบของ path ปัจจุบัน

คุณสมบัติที่เกี่ยวข้องกับการวาดเส้น (Stroke Styles)

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

<!DOCTYPE html>
<html>
<body>
  <canvas id="strokeCanvas" width="450" height="350" style="border:2px solid red;"></canvas>
  
  <script>
    const canvas = document.getElementById('strokeCanvas');
    const ctx = canvas.getContext('2d');
    
    // เส้นตรงง่ายๆ
    ctx.beginPath();
    ctx.moveTo(100, 200);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 3;
    ctx.stroke();
    
    // สามเหลี่ยม
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(20, 100);
    ctx.lineTo(70, 100);
    ctx.closePath(); // ปิดเส้นทาง (เชื่อมกลับจุดเริ่มต้น)
    ctx.strokeStyle = "orange";
    ctx.lineWidth = 5;
    ctx.lineJoin = "round"; // มุมโค้งมน
    ctx.stroke();
  </script>
</body>
</html>

ตัวอย่างขั้นสูง: เส้นประ (Dashed Lines) และกราฟ

<script>
  const ctx = document.getElementById('canvas').getContext('2d');
  
  // เส้นประ (Dashed line)
  ctx.setLineDash([10, 5]); // [draw 10px, skip 5px]
  ctx.lineDashOffset = 0;
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(400, 50);
  ctx.strokeStyle = "#317EFB";
  ctx.lineWidth = 2;
  ctx.stroke();
  
  // เส้นประแบบเคลื่อนที่ (Animated dashed line)
  let offset = 0;
  function animateDash() {
    ctx.clearRect(50, 70, 350, 2);
    ctx.setLineDash([15, 10]);
    ctx.lineDashOffset = -offset;
    ctx.beginPath();
    ctx.moveTo(50, 80);
    ctx.lineTo(400, 80);
    ctx.strokeStyle = "#E91E63";
    ctx.lineWidth = 3;
    ctx.stroke();
    offset = (offset + 1) % 25;
    requestAnimationFrame(animateDash);
  }
  // animateDash();
  
  // กราฟเส้นง่ายๆ
  function drawLineChart(data, color) {
    ctx.beginPath();
    ctx.moveTo(50, 250 - data[0] * 2);
    data.forEach((value, i) => {
      const x = 50 + i * 40;
      const y = 250 - value * 2;
      ctx.lineTo(x, y);
    });
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.stroke();
  }
  
  drawLineChart([10, 25, 15, 30, 20, 40, 35], "#4CAF50");
  drawLineChart([5, 15, 10, 20, 18, 25, 22], "#FF9800");
</script>

stroke() vs fill()

การใช้งานร่วมกัน (Stroke + Fill)

ctx.beginPath();
ctx.arc(200, 150, 80, 0, Math.PI * 2);
// วาดทั้ง fill และ stroke
ctx.fillStyle = "rgba(49, 126, 251, 0.3)";
ctx.fill();
ctx.strokeStyle = "#317EFB";
ctx.lineWidth = 4;
ctx.stroke();

Performance Tips

• ใช้ beginPath() เริ่มเส้นทางใหม่เสมอ ก่อนวาดรูปใหม่
• จัดกลุ่มการวาดที่มีสไตล์เดียวกัน เรียก stroke() ครั้งเดียว
• หลีกเลี่ยงการเปลี่ยน strokeStyle บ่อยๆ ใน loop
• ใช้ Path2D object สำหรับ path ที่ซับซ้อนและใช้ซ้ำได้