Thuộc tính width của HTML <canvas>

Thẻ <canvas> HTML

Định nghĩa và cách sử dụng

width Thuộc tính quy định độ rộng của phần tử <canvas> bằng đơn vị pixel.

Hướng dẫn

Vui lòng sử dụng Thuộc tính height Đặt độ cao của phần tử <canvas> bằng đơn vị pixel.

Mỗi khi thiết lập lại độ cao hoặc độ rộng của bề mặt vẽ, nội dung của bề mặt vẽ sẽ bị xóa (xem ví dụ ở cuối trang).

Vui lòng xem Hướng dẫn HTML Canvas Học thêm về phần tử <canvas> tại đây.

Mô hình

Ví dụ 1

Phần tử <canvas> có độ rộng và độ cao đều là 200 pixel:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

Thử ngay

Ví dụ 2

Bằng cách đặt thuộc tính width thành 400px để xóa bỏ bề mặt vẽ (sử dụng JavaScript):

<canvas id="myCanvas" width="200" height="200" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.width = 400;
}
</script>

Thử ngay

Cú pháp

<canvas width="pixels">

Giá trị thuộc tính

Giá trị Mô tả
pixels Định nghĩa chiều rộng của canvas bằng pixel (ví dụ như “100”). Giá trị mặc định là 300.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

Thẻ <canvas> HTML