JS에서 Canvas Blur(흐림)효과 없애는 법

Canvas를 JS에서 불러와서 사용하다 보면

 

이렇게 흐리게 그려지는 순간이 있다. 나도 처음에 놀라서 구글링을 해봤지만 구글에도 나오지 않아 예전 코드와 비교하며 열심히 찾고있던 도중 뭔가 이미지를 억지로 확대한거 같은 느낌을 받아

CSS에서 정의했던 canvas의 넓이를

이렇게 HTML에 줘봤더니

와우! 성공했다. 내가 보기에 이것의 원인은 아까 말한대로 원래 200x200을 1000x1000으로 확장시켜서 이미지가 손상이 온것과 같은 원리 같다. 즉, HTML에서는 100x100이라고 했지만 CSS에서는 800x800으로 확대 시킨것이다.

 

해결 방법 : HTML에서 canvas에 width와 height를 지정해주자

 

점점 나도 웹에 적응하는 것 같아서 기분이 좋다.