..

Search

width

width

<canvas> 태그의 width 속성


HTML <canvas> 태그 ⇒


정의 및 특징

<canvas> 태그의 width 속성은 <canvas> 요소의 너비를 픽셀(pixel) 단위로 명시합니다.

 

또한, <canvas> 요소의 height 속성을 사용하면 <canvas> 요소의 높이를 명시할 수 있습니다.

<canvas> 요소의 height 속성이나 width 속성을 재설정하면, 예제 2처럼 <canvas> 요소의 기존 콘텐츠는 모두 사라질 것입니다.


문법

<canvas width="픽셀값">

속성값

속성값   설명

픽셀값

 

<canvas> 요소의 너비를 픽셀(pixel) 단위로 명시함.

기본값은 300으로 설정됨.


예제 1
<canvas id="myCanvas" style="border: 2px solid red">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

<canvas id="yourCanvas" width="100" style="border: 2px solid blue">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

코딩연습 ▶

 

예제 2
<canvas id="myCanvas" height="200" width="200" style="border: 2px solid black">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<button onclick="changeWidth()">너비 변경</button>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "yellow";
    context.fillRect(0,0,150,150);
    function changeWidth() {
        canvas.width = 300;
    }
</script>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

width 1.0 지원함 9.0 1.5 2.0 9.0

HTML5에서 변경된 사항

<canvas> 태그는 HTML5에서 새롭게 추가된 요소입니다.


연습문제