Tại sao dùng thẻ canvas trong HTML5

Thẻ <canvas> HTML5 cung cấp khu vực vẽ bitmap (raster) được điều khiển bởi JavaScript. Dùng cho đồ họa động, game, biểu đồ, xử lý ảnh, video frame...

Thuộc tính cốt lõi:

Lưu ý: Luôn đặt width/height trên thẻ <canvas> (không dùng CSS) để tránh méo hình khi scale.

Ví dụ: Vẽ hình chữ nhật

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Canvas Tag</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      var c = document.getElementById('myCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#7cce2b';
      ctx.fillRect(0, 0, 300, 100);
    </script>
  </body>
</html>

Canvas vs SVG: Canvas = bitmap (pixel), phù hợp animation/game, nhiều đối tượng. SVG = vector, phù hợp biểu đồ, icon, in ấn, scale không mất chất lượng.