<canvas> height와 width 렌더링 왜곡 문제

<canvas> 요소

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img>요소처럼 보입니다. 실제로 <canvas>요소에는 'width'와 'height'의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .

노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <canvas> 속성에서 'width' 및 'height' 속성을 명시적으로 지정하십시오.

 

MDN canvas 기본 사용법

 

canvas 사이즈를 CSS파일에서 650*650으로 지정했으나 레이아웃 크기는 300*150이기 때문에 실제 그려지는 것은 레이아웃 크기에 맞춰서 그려진다. 때문에 원래 의도한대로 사이즈를 맞추려면, DOM 프로퍼티에 접근하여 'width' 와 'height' 를 적용하거나 HTML의 <canvas> 속성에 명시적으로 사이즈를 지정해주어야 한다.

 

<canvas id="tutorial" width='650' height='650'></canvas>