html 캔버스의 경우 해당 프레임마다 새롭게 그려야 하는 특성이 있음 기존의 html과는 다르게 캔버스 내의 어떤 요소를 움직이게 된다면, 새롭게 그려내지 않고 요소만을 움직였을 때, 기존의 요소가 해당 위치에 그대로 남아 잔상이 생기는 문제 발생 이를 해결하기 위한 방법으로 새롭게 계속 캔버스를 그려내야 함
그렇다면 캔버스에서의 드래그 앤 드롭은 어떻게 이루어 지는가? 캔버스에 onmousedown 이벤트를 걸어놔야 할 필요성이 있음 캔버스는 그려진 요소에 대해 직접적으로 접근이 불가능함 그려진 요소에 접근하기 위해서는 event 객체가 반환하는 clientX와 clientY를 받아 이를 활용하여 요소 안에 접근하는지를 확인해야 할 필요성이 있음
하나의 직사각형이 {x: 200, y:50, width: 200, height: 200} 이고, 이 직사각형을 캔버스의 (0,0) 좌표에 그린다고 가정
그려진 직사각형은 (0,0)부터 (200, 50)까지의 범위를 차지하고 있음
그렇다면 해당 요소를 클릭하는지 확인하는 방법은 캔버스에 mousedown 이벤트가 발생할 때, 이벤트가 발생한 clientX와 clientY가 직사각형의 범위 내에 있는지 좌표로 계산해야 함
clientX는 0~200 사이에 있어야 하고, clientY는 0부터 50 사이에 있어야 함
이를 판단하는 함수를 따로 만들고 boolean값으로 구별한 뒤에, 요소 안에 있으면 드래그앤드롭 이벤트가 작동할 수 있도록 해야 함