HTML5에서 캔버스(canvas) 요소를 사용할 때 그래픽이나 도형이 찌그러지거나 비율이 이상하게 보이는 경우가 있습니다. 이런 캔버스 왜곡 현상은 대부분 캔버스의 크기 설정이 잘못되어 발생합니다. 이 글에서는 그 원인과 해결 방법을 알아보겠습니다.
캔버스 왜곡의 원인
캔버스가 왜곡되어 보인다면, 먼저 width와 height 속성을 직접 지정해 주는 것이 좋습니다. CSS로만 크기를 조절하면 내부 좌표계와 화면에 표시되는 크기가 달라져 그림이 늘어나거나 찌그러질 수 있기 때문입니다.
<canvas id="canvas1" width="400" height="300"></canvas>
HTML5 캔버스의 기본 크기
별도의 크기를 지정하지 않으면 HTML5 캔버스는 기본적으로 2:1 비율을 가집니다.
width = 300 height = 150
즉, 기본 캔버스는 가로 300픽셀, 세로 150픽셀입니다. 이 크기를 벗어난 비율로 CSS 등으로 강제 조정하면 콘텐츠가 왜곡되어 나타날 수 있으므로 주의해야 합니다.
예제 코드
아래 예제는 빨간색 테두리를 가진 100×100 크기의 정사각형 캔버스를 생성하는 코드입니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>실행 결과
위 코드를 실행하면 아래 이미지처럼 빨간색 테두리가 있는 100×100 픽셀 크기의 캔버스가 화면에 표시됩니다.
정리
캔버스 왜곡 문제를 방지하려면 다음 사항을 기억하세요.
- 캔버스의 실제 크기는 반드시
width,height속성으로 지정합니다. - CSS로 크기를 변경할 때는 내부 해상도와 표시 크기의 비율이 일치하도록 합니다.
- 기본 크기는 300×150(2:1 비율)이며, 필요에 따라 자유롭게 조정할 수 있습니다.