HTML5 Canvas는 자체적으로 이중 버퍼링(double buffering) 기능을 기본 제공하지 않습니다. 하지만 오프스크린 캔버스(off-screen canvas)를 활용하면 손쉽게 이중 버퍼링 효과를 구현할 수 있습니다.
이중 버퍼링이란?
이중 버퍼링은 화면 깜빡임(flickering)을 방지하기 위해 사용되는 그래픽 렌더링 기법입니다. 실제 화면에 보이는 캔버스에 직접 그리는 대신, 먼저 숨겨진 버퍼 캔버스에 모든 요소를 그린 후 한 번에 화면으로 전송하는 방식입니다.
구현 원리
핵심 아이디어는 간단합니다.
- 화면에 표시되지 않는 두 번째 캔버스 요소를 생성합니다.
- 모든 그리기 작업을 이 버퍼 캔버스에서 수행합니다.
- 그리기가 완료되면
drawImage()메서드를 사용해 버퍼 캔버스의 내용을 첫 번째(보이는) 캔버스로 한꺼번에 복사합니다.
예제 코드
// 화면에 표시되는 캔버스
var canvas1 = document.getElementById('canvas');
var context1 = canvas1.getContext('2d');
// 버퍼 역할을 할 오프스크린 캔버스 생성
var canvas2 = document.createElement('canvas');
canvas2.width = 250;
canvas2.height = 250;
var context2 = canvas2.getContext('2d');
// 버퍼 캔버스에 그리기 작업 수행
context2.beginPath();
context2.moveTo(10, 10);
context2.lineTo(10, 30);
context2.stroke();
// 완성된 버퍼 캔버스를 화면 캔버스에 렌더링
context1.drawImage(canvas2, 0, 0);코드 설명
document.createElement('canvas')로 생성한 캔버스는 DOM에 추가하지 않는 한 화면에 나타나지 않으므로, 임시 작업 공간으로 사용하기에 적합합니다. 애니메이션처럼 매 프레임마다 여러 요소를 다시 그려야 하는 경우, 이 방식을 사용하면 중간 단계의 부분적인 그리기 과정이 사용자에게 노출되지 않아 훨씬 부드러운 화면을 만들 수 있습니다.