HTML의 <canvas> 요소에서 width 속성은 캔버스의 가로 크기를 픽셀 단위로 지정하는 데 사용됩니다. 캔버스에 그래픽을 그리기 전에 먼저 적절한 크기를 설정하는 것이 중요하며, 이때 width와 height 속성을 함께 활용합니다.
기본 문법
<canvas width="pixels_val">
위 문법에서 pixels_val은 픽셀 단위로 설정하고자 하는 너비 값입니다. 값은 숫자만 입력하며, 별도의 단위(px)는 붙이지 않습니다.
width 속성 사용 예제
다음은 <canvas> 요소의 width 속성을 실제로 구현한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow">
HTML5 canvas 태그를 지원하지 않는 브라우저입니다.
</canvas>
<script>
var c = document.getElementById("newCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF5655";
context.fillRect(100, 50, 60, 100);
</script>
</body>
</html>실행 결과
예제 코드 상세 설명
위 예제에서는 캔버스를 생성한 후 JavaScript를 사용하여 캔버스 위에 사각형을 그렸습니다.
1. 캔버스 요소 정의
먼저 id, width, height를 설정하여 캔버스를 생성했습니다. 여기서 width는 400px, height는 200px로 지정되었으며, 눈에 잘 보이도록 노란색 점선 테두리 스타일을 추가했습니다.
<canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow"> HTML5 canvas 태그를 지원하지 않는 브라우저입니다. </canvas>
캔버스 태그 내부의 텍스트는 브라우저가 HTML5 canvas를 지원하지 않을 경우에만 표시되는 대체 콘텐츠입니다.
2. JavaScript로 그래픽 그리기
이후 스크립트에서 getContext("2d") 메서드로 2D 드로잉 컨텍스트를 가져오고, fillStyle로 색상을 지정한 뒤 fillRect()로 빨간색 사각형을 그렸습니다.
<script>
var c = document.getElementById("newCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF5655";
context.fillRect(100, 50, 60, 100);
</script>fillRect(100, 50, 60, 100)는 각각 x좌표 100, y좌표 50에서 시작하여 너비 60px, 높이 100px의 사각형을 그린다는 의미입니다.
정리
<canvas> 요소의 width 속성은 캔버스의 가로 크기를 픽셀 단위로 결정하는 필수적인 속성입니다. CSS로 캔버스 크기를 조절할 수도 있지만, 실제 드로잉 영역의 해상도는 width와 height 속성으로 결정되므로 두 방식을 혼동하지 않도록 주의해야 합니다. CSS로만 크기를 변경하면 그래픽이 늘어나거나 찌그러질 수 있습니다.