canvas tag 란??

html tag인 canvas와 JS를 사용하여 그래픽을 그려내기 위한 수단을 제공해준다.
애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다.
주로 2D 그래픽에 중점을 둔다!
canvas는 크기 설정이 css와 JS에서 둘 다 지정해줘야 제대로 작동한다.

context

context는 이 요소 안에서 픽셀에 접근 할 수 있는 방법이다.

const ctx = canvas.getContext("2d");

이런 방식으로 나타낼 수 있다. 2d뿐만 아니라 context는 여러가지가 존재한다.

javascript와 연결

(css는 따로 설정해줬다.)
mousemove 시 console에 나타나게 확인해주는 방법으로 canvas tag와 JS를 연결한 것을 볼 수 있다!

mousemove

말 그대로 mouse가 이동 시 나타날 event를 생성해준다.
이 중 offset이라는 속성은, 해당 canvas 부분과 관련이 있는 값이라 매우 중요하다!!
위 캡쳐에서 보이는 clientX와 clientY는 전체 윈도우에서의 마우스 위치 값을 보여주는 것이다.