getImageData 는 느리다
이미지 크기가 크면 큰 만큼 느리다.
canvas clone 작업 시
ctx.putImageData(ctx0.getImageData(),0,0)
처럼 할 경우
비번한 호출 시 웹 페이지의 프레임 드롭이 발생할 정도로 느려질 수 있다.
대시하여
ctx.save();
ctx.globalAlpha = 1,
ctx.globalCompositeOperation = "source-over",
ctx.drawImage(ctx0,0,0);
ctx.restore();
처럼 처리하였음.
느린 이유는
GPU -> CPU로 getImageData 는 너비x높이x4Bytes 의 데이터가 전송 된다. ( 1920 × 1080 × 4bytes ≈ 8MB )
하드웨어 가속이 적용 안된다고 한다.
drawImage 는 하드웨어 가속이 동작하고
GPU -> GPU 처리라서 (GPU 내부 동작) 빠르다고 한다.
CPU와 GPU는 동작을 각각하고 메모리 영역도 각각 관리하기 때문에 서로간의 데이터 전송시 무서운 듯
