Cách vẽ trên Canvas HTML bằng JavaScript?

Vẽ trên <canvas> HTML phải dùng JavaScript. Các bước cơ bản:

1. Dùng document.getElementById() tìm element canvas.
2. Dùng getContext('2d') lấy ngữ cảnh vẽ (drawing context).
3. Sử dụng các phương thức vẽ: fillRect, strokeRect, arc, lineTo, v.v.

Ví dụ: Vẽ hình chữ nhật màu xanh

<!DOCTYPE html>
<html>
<head>
    <title>HTML Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="250" style="border:2px solid #000;"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // Vẽ hình chữ nhật tô màu
        ctx.fillStyle = "#56A7E2";
        ctx.fillRect(0, 0, 250, 120);

        // Vẽ đường viền
        ctx.strokeStyle = "#FF0000";
        ctx.lineWidth = 3;
        ctx.strokeRect(50, 50, 150, 80);

        // Vẽ đường tròn
        ctx.beginPath();
        ctx.arc(300, 100, 40, 0, 2 * Math.PI);
        ctx.fillStyle = "#FFD700";
        ctx.fill();
        ctx.stroke();
    </script>
</body>
</html>

Các phương thức vẽ phổ biến (2D Context):

Lưu ý: Canvas resolution (width/height attribute) khác với CSS size. Set attribute để tránh mờ.