[HTML5] canvas에 마우스로 사각형 그리기

마우스로 사각형을 그리기 위해서, HTML5 canvas를 이용해본다.

 

mousedown시에는 마우스 클릭상태를 on으로 변경하며, 사각형의 시작 x, y 좌표를 얻고,

mousemove시 클릭 상태라면, 시작 x, y와 현재 마우스 point를 사용해 사각형을 그리고,

mouseup시에는 마우스 클릭상태를 off로 변경한다.