Cách vẽ hình chữ nhật trên HTML5 Canvas

Thẻ <canvas> HTML5 dùng để vẽ đồ họa, hoạt ảnh bằng JavaScript. Để vẽ hình chữ nhật tô đặc, sử dụng phương thức fillRect(x, y, width, height).

Ví dụ

Mã sau vẽ một hình chữ nhật màu xanh lá:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#7cce2b';
      ctx.fillRect(0,0,300,100);
    </script>
  </body>
</html>

Các phương thức liên quan:

• strokeRect(x, y, w, h) – vẽ viền hình chữ nhật
• clearRect(x, y, w, h) – xóa vùng chữ nhật (làm trong suốt)