Canvas 에서 마우스로 부드러운 선 그리기

처음 캔버스에 마우스로 그림을 그릴 땐 괜찮아보였다. 그런데 선의 굵기를 굵게해서 그리니까 선이 갈라져 있는 것 처럼 보였다.

곡선일 때 더심해보였는데, 이유를 몰라서 여러가지 캔버스 line의 설정에 대해 알아보았다.

그러다가 선 모양 (line style) 설정에 대해 알게됐다

 

lineWidth	선 두께
lineCap	선 끝 부분의 스타일
lineJoin	선이 만나는 모서리 스타일

lineCap의 기본값은 "butt"이고, lineJoin의 기본값은 "miter"이다

 

lineCap 설정값

lineJoin 설정값

그래서 이 두 가지 설정값을 변경시켜보았다.

 

ctx.lineJoin = "round"만 설정해줘도 훨씬 선이 부드러워진다.

내가 만든 캔버스에는 혹시 몰라서 둘 다 "round"로 설정해줬다.

 

참고한 페이지

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#line_styles

스타일과 색 적용하기 - Web API | MDN

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=140170244058 

HTML5 canvas - 선스타일 지정하기 ( lineWidth, lineCap, lineJoin, strokeStyle)