Thẻ <canvas> trong HTML

Thẻ <canvas> dùng để vẽ đồ họa (hình chữ nhật, đường cong, hình ảnh, v.v.) thông qua JavaScript. Được giới thiệu trong HTML5. Mỗi canvas có hai thuộc tính kích thước: width và height (tính bằng pixel).

Thuộc tính

• height – Chiều cao canvas (pixel).
• width – Chiều rộng canvas (pixel).

Ví dụ 1: Vẽ hình chữ nhật có đổ bóng

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="600" height="350" style="border: 2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "green";
    ctx.fillRect(40, 40, 100, 250);
    ctx.shadowBlur = 30;
    ctx.shadowColor = "blue";
    ctx.fillStyle = "orange";
    ctx.fillRect(200, 40, 200, 150);
  </script>
</body>
</html>

Ví dụ 2: Vẽ đường cong bậc hai (quadratic curve)

<!DOCTYPE HTML>
<html>
<head>
  <style>
    #test { width: 100px; height: 100px; margin: 0px auto; }
  </style>
  <script>
    function drawShape() {
      var canvas = document.getElementById('mycanvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(75, 25);
        ctx.quadraticCurveTo(25, 25, 25, 62.5);
        ctx.quadraticCurveTo(25, 100, 50, 100);
        ctx.quadraticCurveTo(50, 120, 30, 125);
        ctx.quadraticCurveTo(60, 120, 65, 100);
        ctx.quadraticCurveTo(125, 100, 125, 62.5);
        ctx.quadraticCurveTo(125, 25, 75, 25);
        ctx.stroke();
      } else {
        alert('Cần Safari hoặc Firefox 1.5+ để xem demo.');
      }
    }
  </script>
</head>
<body id="test" onload="drawShape();">
  <canvas id="mycanvas"></canvas>
</body>
</html>