캔버스 리사이즈 시 주의할 점

발생일: 2011.09.08

문제:
진행 중인 미니 프로젝트에서는, 캔버스에 드로잉하고 캔버스를 resize 하는 스펙이 있다.
resize 할 때에는, 그려진 데이터는 (좌측 상단을 기준으로) 고정하고 캔버스만 늘리려고 한다.

jquery를 이용해서 구현하고 있던 터라, 캔버스 엘리먼트를 담고 아래와 같이 크기를 변경했다.

$("canvas").width(w).height(h);

캔버스 크기만 변경되길 기대했는데, 그려진 픽셀까지 함께 확대가 된다.
왜 그럴까?


해결책:
캔버스의 실질적인 크기는 canvas 태그의 속성으로 설정해야 한다.
(속성을 정의하지 않을 경우 기본으로 300, 150 크기를 가진다)

<canvas width="600" height="400"></canvas>

만약 css 속성으로 캔버스 사이즈를 변경할 경우엔,
속성에 기재된 값과 css 속성값의 비율에 따라 스케일이 변경되어 렌더링된다.

위에서 시도했던 것처럼, jquery로 width를 변경할 경우 css 값을 변경하게 되기 때문에 그려진 데이터가 확대된 것이었다.
실제로 캔버스의 사이즈를 변경하고자 하면 아래와 같이 하면 된다.

$("canvas").attr("width", w).attr("height", h);

또는, 아래와 같이 직접 속성을 변경한다.

canvas.width = w;
canvas.height = h;


* 주의:
canvas의 width 나 height을 변경하면, 캔버스 내용이 모두 삭제된다.
기존 데이터를 유지하려면 값을 변경하기 전에 백업해뒀다가 새로 그리는 방법을 이용한다.
- getImageData & putImageData 를 이용한다.
- 캔버스 데이터를 복사한다: http://ohgyun.com/320


* 참고:
- 캔버스 스펙: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width