HTML5 의 canvas에서는, style 의 width, height 크기 설정이 안 먹는다.

흠. 나도 의외긴 한데, 그렇다.

사용 시나리오는 이러하다.

1. canvas 를 선언

2. width, height 를 명시적으로 지정

3. 그림 그린 후 출력 확인

4. 크기가 2. 에서 지정한 width, height 와 맞지 않는다.

무슨 소리냐... 예를 들어 , 아래와 같은 코드를 작성했다 치자.

<canvas id="can1" style="width:300px; height:200px; background-color:red;" > </canvas>

<script type="text/javascript">

    var node1 = document.getElementById("can1");

    var ctx = node1.getContext("2d");

    ctx.fillRect(0, 0, 100, 100);

</script>

이러면, 300 * 200 캔버스 칸에 100 * 100 짜리 검은 사각형이 그려지고 나머지 부분이 빨간 색으로 차 있어야 하잖아?

근데 , 캔버스가 300*200 아니고 이상한? 배율을 확대한 것 같은 내용이 된다.

저기서 fillRect() 대신 fillText() 를 쓰면, 도트가 깨지는 걸 명확히 확인할 수 있다.

뭔소리냐면, canvas 안의 좌표계와 html 의 좌표계가 일치하지 않는다는 증거다.

나도 맨첨에 이게 왜 그런지 몰라서 삽질을 좀( .... 조금이 아니라 많이 ) 해 봤는데, 해결책은 이러하다.

<canvas id="can1" style="width:300px; height:200px; background-color:red;" > </canvas>

를 

<canvas id="can1" width=300 height=200 style="background-color:red;" > </canvas>

으로 변경

한다.

왜 저런 식으로 표준을 정한 건지는 모르겠는데( 아마 랜더링 때의 절차 문제인 것으로 추측 ) 

1. canvas 는 크기를 지정할 때 style 로 지정하면 좌표계를 인식하지 못하고, default setting 으로 잡는다. 그러므로, 

2. 명시적으로 width, height 로 크기를 지정해 줘야 됨.

참고로, 

3. javascript 안에서 width, height 설정해도 parent 의 canvas를 변경할 수는 없으므로, ctx.width, ctx.height 를 쓸 생각 하지 말고 그냥 canvas 태그에서 직접 width, height 를 지정할 것.

예를 들어, 

<script type="text/javascript">

    var node1 = document.getElementById("can1");

    var ctx = node1.getContext("2d");

    ctx.width = 300;  // 안먹힌다.

    ctx.height = 200;  // 안먹힌다.

</script>

이래도 안된단 뜻임. ( 나는 안 됐는데, 너님은 될지도? )

다른사람들의 삽질이 줄어들기를 바라면서, 이상 끝. 

PS : 뭐, 확대 / 축소 시스템 만들 거라면 이거 쓰면 쉽게 되긴 하겠지.