사전파악

• 마우스 이벤트가 필요하다.
  • 마우스를 클릭한 상태에서 움직일 경우의 좌표가 필요해보인다.
  • 마우스를 떼면 이벤트가 발생하지 않아야 한다.
• 색깔의 변화 & 선의 크기의 변화가 필요하다.
  • 이것은 마우스가 조금이라도 움직이는 순간의 이벤트발생시에 매번 변화가 필요해보인다.
• 선을 그릴 좌표를 찾을 필요가 있어보인다.

HTML

HTML5 Canvas 사용하기

• stroke (선) 사용하기
• strokeStyle(선색), lineWidth(선굵기) 사용하기
• beginPath 설정해서, 새 경로시작 설정하기

HTML 캔버스(canvas) 기본 사용법 그림 그리기

CanvasRenderingContext2D.beginPath() - Web APIs | MDN

RGB 컬러팔레트 변화 파악 ★

• (대략)빨→주→노→초→파→남→보→핑→빨→주 .....
• ( Wes 형의 HSL 컬러모델 쓰는거보고 현타옴.. )

R 오르는 => G === 0 & B === 255
R 내리는 => G === 255 & B === 0

G 오르는 => R === 255 & B === 0
G 내리는 => R === 0 & B === 255

B 오르는 => R === 0 & G === 255
B 내리는 => R === 255 & G === 0

• ctx.fiiStyle ⇒ 컬러

RGB색상표/16진수 컬러 코드표 - Hi!Penpal!