Thẻ canvas trong HTML

• Bùi Tấn Lực
• 869
• 26/09/2025

Chức năng của Thẻ canvas trong HTML

Thẻ canvas trong HTML kết hợp với script để vẽ hình vuông, hình tròn, hình chữ nhật, đường thẳng, hình ảnh, văn bản,... lên chính nó.

Code Thẻ canvas trong HTML

Thẻ canvas bình thường trong HTML

<!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong-->
<canvas id="myCanvas"  style="border: 1px solid #000; width: 100%; height: 300px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas>

Chạy Thử

Thẻ canvas vẽ hình vuông, chữ nhật trong HTML

<!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong-->
<!--Chiều rộng canvas phải gấp đôi chiều cao-->
<canvas id="canvasid"  style="border: 1px solid #000; width: 400px; height: 200px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas>
<script>
// Lấy id canvasid
let canvasid = document.getElementById("canvasid");
// Lấy ngữ cảnh vẽ 2D
let ctx = canvasid.getContext("2d");
//Hình chữ nhật
ctx.fillStyle = "#FF0000";
//:left:5px;top:10px;width:100px;height:50px
ctx.fillRect(5, 10, 100, 50);
//Hình vuông
ctx.fillStyle = "#FF0000";
//:left:5px;top:70px;width:50px;height:50px
ctx.fillRect(5, 70, 50, 50);
</script>

Chạy Thử

Thẻ canvas vẽ hình tròn trong HTML

Phương thức arc() có các tham số sau:

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x, y: Tọa độ của tâm hình cung (tính bằng pixel).

radius: Bán kính của hình cung (tính bằng pixel).

startAngle: Góc bắt đầu của cung tròn, được tính bằng radian.

endAngle: Góc kết thúc của cung tròn, được tính bằng radian.

anticlockwise (tùy chọn): Một giá trị boolean. Nếu là true, cung tròn được vẽ theo chiều ngược chiều kim đồng hồ; nếu là false (mặc định), cung tròn được vẽ theo chiều kim đồng hồ.

<!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong-->
<!--Chiều rộng canvas phải gấp đôi chiều cao-->
<canvas id="canvasid"  style="border: 1px solid #000; width: 400px; height: 200px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas>
<script>
// Lấy id canvasid
let canvasid = document.getElementById("canvasid");
// Lấy ngữ cảnh vẽ 2D
let ctx = canvasid.getContext("2d");
// Vẽ hình tròn
ctx.beginPath(); // Bắt đầu một đường dẫn mới
ctx.arc(70, 50, 40, 0, 2 * Math.PI); // Vẽ một cung tròn với các tham số
ctx.fillStyle = "blue"; // Chọn màu tô
ctx.fill(); // Tô màu hình tròn

// Bạn cũng có thể vẽ một đường viền
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.stroke();
</script>

Chạy Thử

Những lưu ý quan trọng khi sử dụng thẻ canvas trong HTML

Thiết lập width và height đúng cách để tránh hình ảnh bị mờ

Canvas có hai loại kích thước khác nhau là kích thước vùng vẽ thực tế và kích thước hiển thị bằng CSS. Nếu chỉ thay đổi chiều rộng hoặc chiều cao bằng CSS mà không thiết lập thuộc tính width và height của canvas, trình duyệt sẽ phải co giãn nội dung đã vẽ, khiến hình ảnh bị mờ hoặc méo.

Để đảm bảo chất lượng hiển thị, hãy khai báo đúng kích thước vùng vẽ ngay từ đầu và chỉ sử dụng CSS khi cần căn chỉnh vị trí hoặc bố cục. Đây là cách giúp đồ họa sắc nét hơn trên cả màn hình thông thường và màn hình có mật độ điểm ảnh cao.

Cung cấp nội dung thay thế (fallback content) cho trình duyệt không hỗ trợ

Mặc dù hầu hết trình duyệt hiện đại đều hỗ trợ canvas, việc bổ sung nội dung thay thế vẫn là một thói quen tốt. Nếu trình duyệt hoặc thiết bị không thể hiển thị canvas, người dùng vẫn có thể biết mục đích của khu vực này thông qua văn bản mô tả.

Fallback content còn hữu ích trong một số trường hợp liên quan đến khả năng truy cập, giúp người dùng không bị mất hoàn toàn thông tin khi canvas không thể hoạt động.

<canvas width="600" height="300">
    Trình duyệt của bạn không hỗ trợ canvas.
</canvas>

Không sử dụng canvas khi nội dung cần SEO hoặc hỗ trợ trình đọc màn hình

Canvas chỉ lưu kết quả dưới dạng hình ảnh được vẽ bằng JavaScript nên công cụ tìm kiếm không thể hiểu nội dung bên trong như văn bản HTML thông thường. Nếu cần hiển thị bài viết, tiêu đề, bảng dữ liệu hoặc thông tin quan trọng, nên sử dụng các phần tử HTML phù hợp thay vì vẽ trực tiếp lên canvas.

Ngoài ra, nhiều trình đọc màn hình cũng không thể diễn giải nội dung đã được vẽ. Vì vậy, đối với các nội dung mang tính thông tin hoặc cần hỗ trợ người dùng khuyết tật, HTML vẫn là lựa chọn phù hợp hơn.

Khi nào nên dùng canvas và khi nào nên dùng SVG

Canvas phù hợp với các tác vụ cần vẽ liên tục hoặc cập nhật theo thời gian thực như game, biểu đồ động, xử lý ảnh, hiệu ứng hạt hoặc mô phỏng. Việc thao tác trực tiếp trên từng điểm ảnh giúp canvas đạt hiệu suất cao trong các tình huống này.

Trong khi đó, SVG hoạt động dựa trên đồ họa vector nên thích hợp cho logo, biểu tượng, sơ đồ, hình minh họa và các đối tượng cần giữ độ sắc nét khi phóng to. SVG cũng dễ chỉnh sửa bằng CSS, JavaScript và thân thiện hơn với SEO cũng như khả năng truy cập.

Trường hợp sử dụng	Lựa chọn phù hợp
Game 2D, hiệu ứng động	Canvas
Chỉnh sửa hoặc xử lý ảnh	Canvas
Logo, icon, biểu tượng	SVG
Sơ đồ, biểu đồ vector	SVG
Nội dung cần SEO và khả năng truy cập tốt	HTML hoặc SVG

Việc lựa chọn đúng công nghệ sẽ giúp website đạt hiệu suất tốt hơn, dễ bảo trì và mang lại trải nghiệm tối ưu cho cả người dùng lẫn công cụ tìm kiếm.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ canvas trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ canvas trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn