HTML <canvas> 너비 속성

❮ HTML <캔버스> 태그

예시

높이와 너비가 200픽셀인 <canvas> 요소:

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

width속성은 요소의 너비를 픽셀 단위로 지정 합니다 <canvas>.

팁:height 속성을 사용하여 요소의 높이를 픽셀 단위로 지정 합니다 <canvas>.

팁: 캔버스의 높이 또는 너비가 재설정될 때마다 캔버스 콘텐츠가 지워집니다(페이지 하단의 예 참조).

팁: HTML Canvas Tutorial<canvas> 에서 요소에 대해 자세히 알아보세요 .

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Attribute
width	4.0	9.0	2.0	3.1	9.0

통사론

속성 값

Value	Description
pixels	Specifies the width of the canvas, in pixels (e.g. "100"). Default value is 300

더 많은 예

예시

너비 또는 높이 속성을 설정하여 캔버스를 지웁니다(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 = "#92B901";
ctx.fillRect(50, 50, 100, 100);

function clearCanvas() {
c.height = 300;
}

</script>