Cách sử dụng hình ảnh với HTML5 Canvas

Để vẽ hình ảnh lên Canvas, dùng phương thức drawImage(). Phương thức này vẽ hình ảnh (Image, Canvas, Video) lên canvas tại tọa độ cho trước.

Ví dụ

Mã sau tải hình ảnh và vẽ lên canvas, sau đó vẽ thêm đường thẳng:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      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('Trình duyệt không hỗ trợ Canvas');
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>

Các dạng drawImage:

• drawImage(image, dx, dy)
• drawImage(image, dx, dy, dWidth, dHeight)
• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) (cắt nguồn)