캔버스 복사하기

발생일: 2011.08.22

문제:
가벼운 팀 프로젝트로, 웹소켓과 캔버스를 이용해 동시에 그림을 그릴 수 있는 그림판 같은 걸 만들어보고 있다.
중간에 접속한 유저가 기존에 그려진 데이터를 뿅~ 받아볼 수 있는 동기화 기능이 필요했다.

이미 그려진 캔버스를 복사하려면 어떻게 하지?


해결책:
아래와 같은 순서로 처리하면 된다.

1. base64로 인코딩 된 데이터를 가져온다.
2. 이미지 객체를 만들어서, 이미지 문자열을 src에 할당한다.
3. 이미지 로드가 완료되면 로드된 이미지로 캔버스를 그린다.

이미지 로드가 완료되기 전 복사를 시도하면,
빈 이미지로 캔버스를 그리는 것과 같게 되기 때문에 아무 일도 일어나지 않으니 주의한다.


샘플 코드:
// 이미지 데이터를 가져온다.
var imageData = canvas.toDataURL();

...

// 이미지 데이터를 캔버스에 그린다.
var img = new Image(); // 이미지 객체를 생성하고
img.onload = function () { // 이미지가 로드된 후에
  ...
  ctx.drawImage(img, 0, 0); // 복사할 캔버스의 컨텍스트를 가져와 drawImage를 호출해 다시 그려준다.
};
img.src = imageData;

참고:
http://stackoverflow.com/questions/6169032/copying-canvas-via-todataurl-after-draw-operation-does-not-work