[CSS] HTML5::Canvas 텍스트 흐림현상

HTML5의 캔버스에서 fillText를 이용해서 텍스트를 나타내고 있었다.

그런데 아래와 같이 이상하게 어느 순간 부터 글씨가 흐리게 나타나고 있었다.

인터넷을 찾아보았더니 canvas의 크기 지정을 HTML 엘리먼트에서 하지 않고, CSS로 처리를 할 경우 흐리게 보인다는 것이었다. <= javascript - HTML5 canvas stroke() thick and fuzzy - Stack Overflow

아래와 같이 스타일 시트로 캔버스의 크기 지정을 하고 있었다.

 CSS부분

 HTML부분

다음과 같이 height와 width부분을 CSS에서 HTML로 옮겼다.

 CSS부분

 HTML부분

결과는 아래와 같이 선명하게 바뀌었다.