Cách tạo đồ họa bằng script (canvas) trong HTML?

Thẻ <canvas> (HTML5) cung cấp vùng vẽ bitmap được điều khiển bởi JavaScript (Canvas 2D API hoặc WebGL). Dùng cho: biểu đồ, game, chỉnh sửa ảnh, animation, chữ ký số...

Thuộc tính

Thuộc tính	Giá trị	Mô tả
width	pixels	Chiều rộng bitmap (mặc định 300)
height	pixels	Chiều cao bitmap (mặc định 150)

Ví dụ cơ bản

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas HTML</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="150">Trình duyệt không hỗ trợ canvas.</canvas>
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#00AEEF';
      ctx.fillRect(0, 0, 180, 50); // Vẽ hình chữ nhật
    </script>
  </body>
</html>

Quan trọng: Kích thước CSS vs Bitmap

width/height attribute = kích thước bitmap (số pixel thực).
CSS width/height = kích thước hiển thị (scale).
Nếu không set attribute, bitmap 300x150 bị scale lên/khi CSS đặt lớn hơn → mờ.
Luôn set attribute khớp với CSS hoặc dùng JS set canvas.width = canvas.clientWidth.

Canvas 2D API phổ biến

Hình học: fillRect, strokeRect, arc, beginPath, moveTo, lineTo
Văn bản: fillText, strokeText, font, textAlign
Hình ảnh: drawImage(img, x, y)
Transform: translate, rotate, scale, save/restore
Pixel manipulation: getImageData, putImageData