[JS] OffscreenCanvas

 

OffscreenCanvas

Canvas API는 보통 메인 스레드에서 실행한다.

캔버스 애니메이션과 렌더링과 관련된 계산은 메인 스레드의 부하를 불러오기도 한다.

이를 개선하기 위해 화면 밖에서 렌더링할 수 있는 캔버스를 제공하고 DOM과 Canvas API를 분리하여

canvas 요소가 DOM에 완전히 의존하지 않도록 한다.

 

1. HTML에서 <canvas> 요소 생성

<canvas id="container"></canvas>

 

2. 웹 워커 생성 및 OffscreenCanvas 전달(main.js)

postMessage를 사용할 때 transfer 옵션을 보내야 하는 이유는 OffscreenCanvas 객체를 웹 워커로 소유권을 이전하기 위해서다. JavaScript에서 객체는 기본적으로 복사로 전달된다. 하지만 OffscreenCanvas는 복사할 수 없고, 대신 전송해야만 다른 스레드에서 사용할 수 있다.

• 소유권 이전은 객체를 복사하지 않고, 메모리와 자원을 직접 전달하여 작업 효율성을 높인다.
• 소유권이 이전되면, 메인 스레드에서는 해당 OffscreenCanvas를 더 이상 사용할 수 없고, 워커에서만 사용할 수 있다.

const worker = new Worker(new URL('worker.js', import.meta.url));

const canvas = document.createElement('canvas');
const offscreen = canvas.transferControlToOffscreen();

worker.postMessage({ offscreen }, [offscreen]);

worker.onmessage = event => {
	console.log(event);
}

 

3. 웹 워커에서 OffscreenCanvas로 작업 수행(worker.js)

self.onmessage = (event) => {
    const { offscreen } = event.data;
    
    const ctx = offscreen.getContext('2d');
    
    ctx.fillStyle = 'gray';
    ctx.fillRect(0, 0, 200, 50);
}