실시간 공유 캔버스 개발 - boostcampwm-2022/web30-TODY GitHub Wiki

공부방 내에서 참여자들과 줌과 같이 실시간으로 공유되는 캔버스 기능을 개발했다.

구현 계획

mouse move 이벤트 발생 시, 해당 좌표값을 data channel을 통해 전송하여 다른 플레이어 화면에도 똑같이 그려준다.

개발 진행

계획했던 방법으로 좌표를 주고받아 그려주니 화면에 잘 그려지는 것을 확인했다.

뿌듯한 마음도 잠시.... 🤢😢 오류를 발견했다.

발견한 오류

한 사람, 한사람 번갈아 그리는 경우 잘 그려지지만 내가 그리는 도중에 다른 사용자가 그림을 그리기 시작하면 내가 그리는 부분의 좌표에서 다른 사용자가 그리는 좌표로 선이 이어져 직선이 어지럽게 그려지는 오류가 발생했다.

해당 오류 발생 원인을 알아보니 각 사용자가 그림을 그리기 시작할 때, 사용자 본인의 이전 좌표값에서 path를 그려줘야 하는데 그려주는 선 시작점을 본인의 이전 좌표값으로 갱신해 주지 않아서 생기는 오류였다.

해결 방법

좌표값 전송 시, 이전 좌표값 또한 함께 전달하여 선을 그려줄 때, 이전 좌표값을 활용하여 시작점을 좌표를 갱신해 주도록 코드를 수정했다.

수정 결과, 다른 사람과 동시에 편집하더라도 정상적으로 동작하는 것을 확인할 수 있다.