วิธาใช้ภาพร่วมกับ HTML5 Canvas

บทนำ

ใช้เมธอด drawImage() เพื่อวาดภาพบน Canvas รองรับ 3 รูปแบบ:

// 1. วาดภาพเต็ม
ctx.drawImage(image, x, y);

// 2. วาดภาพปรับขนาด
ctx.drawImage(image, x, y, width, height);

// 3. ตัดส่วนของภาพมาวาด (Cropping)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

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

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          var img = new Image();
          img.src = '/images/backdrop.jpg';
          img.onload = function() {
            ctx.drawImage(img, 0, 0);
            // วาดเส้นทับภาพ
            ctx.beginPath();
            ctx.moveTo(30, 96);
            ctx.lineTo(70, 66);
            ctx.lineTo(103, 76);
            ctx.lineTo(170, 15);
            ctx.stroke();
          };
        } else {
          alert('Browser ไม่รองรับ Canvas');
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>

ข้อสำคัญ

• ต้องรอ img.onload ก่อนถึงจะวาดได้
• รองรับ <img>, <canvas>, <video> เป็น source
• ปัญหา CORS: ภาพจากโดเมนอื่นอาจไม่ให้วาดได้ (tainted canvas)