코딩의 시작, TCP School

◀ 이전 다음 ▶

<canvas> 태그의 width 속성

HTML <canvas> 태그 ⇒

정의 및 특징

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

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

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

문법

속성값

속성값		설명
픽셀값		<canvas> 요소의 너비를 픽셀(pixel) 단위로 명시함. 기본값은 300으로 설정됨.

설명

픽셀값

<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>

코딩연습 ▶