개요

Canvas bitmap과 HTML DOM overlay를 분리해 구성하는 패턴, html2canvas 기반 DOM→Canvas 변환, OffscreenCanvas와 접근성 기준 조사

메모

일반 HTML은 canvas 내부 DOM처럼 렌더링되지 않음. UI는 DOM overlay, 그래픽은 Canvas로 분리하고, 이미지 출력이 필요할 때만 DOM→Canvas snapshot을 수행하는 결론. 데모: https://devsnack-blog.vercel.app/html-in-canvas.html

조사 상세

HTML in Canvas — DOM 오버레이와 HTML→Canvas 래스터화

결론

“HTML을 canvas 안에 넣는다”는 표현은 실제로는 두 가지 구현을 가리킵니다.

DOM 오버레이: <canvas>를 그래픽 배경으로 두고, 일반 HTML 요소를 같은 컨테이너의 앞에 겹칩니다. 버튼·텍스트·입력은 HTML/DOM이 담당하고, 픽셀 그래픽·애니메이션은 Canvas API가 담당합니다.
HTML→Canvas 래스터화: HTML과 CSS를 읽어 별도의 canvas bitmap으로 다시 그립니다. html2canvas가 이 방식의 대표적인 클라이언트 라이브러리입니다.

따라서 일반 HTML을 <canvas>의 내부에 넣어 DOM처럼 렌더링하는 방식은 기준 구현이 아닙니다. UI는 DOM 오버레이로 두고, 이미지 출력이 필요할 때만 HTML→canvas 변환을 별도로 수행하는 구성이 가장 명확합니다.

공식 문서 기준

Canvas는 bitmap 그래픽 표면

MDN은 Canvas API를 JavaScript와 <canvas> 요소를 이용해 그래픽을 그리는 API로 설명하며, 2D 그래픽·애니메이션·게임 그래픽·데이터 시각화 등에 사용할 수 있다고 정리합니다.

WHATWG HTML Living Standard는 canvas 요소를 “동적으로 생성된 이미지, 즉 요소의 bitmap으로 이루어진 embedded content”로 정의합니다. 즉 화면에 보이는 canvas의 핵심 산출물은 HTML 트리가 아니라 bitmap입니다.

<canvas> 안의 마크업은 일반적인 레이아웃 UI를 그리는 자식 DOM으로 취급하는 것이 아니라 fallback content로 다뤄집니다. 스크립트가 동작하고 canvas가 렌더링되는 상황에서 그 자식 HTML이 canvas bitmap 안에 자동 합성되는 것은 아닙니다.

MDN Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
MDN <canvas>: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas
WHATWG HTML § 4.12.5: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element

접근성은 HTML DOM이 유리

MDN은 canvas 자체가 bitmap이며 그려진 객체의 의미 정보를 제공하지 않고, canvas 내용이 semantic HTML처럼 보조공학 도구에 노출되지 않는다고 설명합니다. <canvas> 안에 대체 텍스트를 넣는 것은 기본적인 fallback이지만, 인터랙티브한 영역이 많아질수록 DOM 버튼·텍스트를 실제 UI로 유지하는 편이 접근성과 키보드 조작에 유리합니다.

WHATWG도 canvas가 렌더링되는 동안 fallback content 안의 focusable descendant를 키보드 접근성에 활용할 수 있다고 규정합니다. 다만 시각적으로 그려진 영역과 fallback 요소 사이에 일대일 매핑을 설계해야 합니다.

세 가지 구현 비교

방식	무엇이 실제로 렌더링되는가	장점	주의점
Canvas 단독	JavaScript가 bitmap에 직접 그림	픽셀 그래픽·파티클·차트·게임 루프에 적합	텍스트·버튼·포커스·접근성을 별도로 설계
Canvas + DOM overlay	Canvas bitmap + 앞쪽 HTML 레이아웃	네이티브 입력·CSS·접근성·반응형 UI 활용	canvas 좌표와 DOM 좌표를 resize/scale 때 함께 관리
HTML→Canvas	DOM/CSS를 읽어 새 canvas bitmap 생성	공유용 이미지·썸네일·다운로드 출력	실제 브라우저 스크린샷이 아니며 CSS·폰트·cross-origin 제약 존재

HTML→Canvas 라이브러리: html2canvas

html2canvas README는 브라우저에서 DOM과 적용된 스타일을 읽어 canvas 이미지를 만든다고 설명합니다. 실제 운영체제나 브라우저의 화면을 캡처하는 방식이 아니므로 결과가 화면과 100% 일치한다고 보장하지 않습니다.

또한 README에 따르면:

렌더링은 서버가 아니라 사용자의 브라우저에서 수행됩니다.
cross-origin 콘텐츠는 same-origin 정책의 영향을 받으며, 필요한 경우 proxy가 필요합니다.
모든 CSS 속성이 동일하게 지원되는 것은 아닙니다.
호출 결과는 Promise로 반환되는 canvas입니다.

공식 README: https://github.com/niklasvh/html2canvas
사용 예제: https://html2canvas.hertzen.com/

이번 데모는 외부 라이브러리에 의존하지 않는 DOM 오버레이를 기본으로 하고, html2canvas를 CDN에서 불러왔을 때만 “HTML→Canvas snapshot” 버튼을 활성화하도록 만들었습니다. 따라서 핵심 구조와 변환 단계를 화면에서 분리해 볼 수 있습니다.

성능과 OffscreenCanvas

복잡한 애니메이션이나 많은 그래픽을 그릴 때는 OffscreenCanvas로 렌더링과 애니메이션을 Web Worker에서 수행할 수 있습니다. MDN은 이 방식의 이점으로 메인 스레드의 UI가 canvas 작업에 의해 막히는 것을 줄일 수 있다고 설명합니다.

MDN OffscreenCanvas: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

단, OffscreenCanvas는 HTML DOM을 canvas 안에 넣는 기능이 아닙니다. 렌더링 작업을 어느 실행 컨텍스트에서 수행할지에 관한 API입니다.

구현 패턴

DOM 오버레이

<div class="stage">
 <canvas id="scene" aria-label="배경 그래픽"></canvas>
 <section class="html-overlay" aria-labelledby="title">
 <h2 id="title">HTML UI</h2>
 <button type="button">실제 DOM 버튼</button>
 </section>
</div>

.stage { position: relative; }
.stage canvas { display: block; width: 100%; height: 100%; }
.html-overlay { position: absolute; inset: 0; }

핵심은 두 레이어가 같은 부모의 좌표계에 있고, canvas는 실제 bitmap 크기를 device pixel ratio에 맞춰 관리하며, DOM overlay는 CSS layout으로 반응형 배치된다는 점입니다.

HTML→Canvas 변환

html2canvas(document.querySelector('.html-overlay'))
 .then(snapshotCanvas => {
 document.body.appendChild(snapshotCanvas)
 })

이 코드는 DOM을 읽어 새 canvas를 생성합니다. 기존 canvas 위에 HTML이 “들어가는” 것이 아니라, 별도의 렌더링 결과가 만들어지는 것입니다.

실사용 판단

대시보드·컨트롤·툴 UI: DOM overlay를 기본으로 사용합니다.
게임·파티클·자유형 그래픽·대량 픽셀 애니메이션: Canvas 또는 WebGL을 사용합니다.
공유 이미지·다운로드·썸네일: 필요한 순간에 HTML→Canvas를 수행합니다.
접근성이 중요한 화면: 버튼·텍스트·입력·상태값은 canvas에 글자로 굽지 말고 DOM으로 유지합니다.
모든 것을 하나의 bitmap으로 만들 필요가 없다면: Canvas와 HTML을 섞되, 역할을 분리하는 편이 유지보수와 검증이 쉽습니다.

데모

HTML 데모 목록: https://devsnack-blog.vercel.app/demos/html
직접 실행: https://devsnack-blog.vercel.app/html-in-canvas.html

데모는 다음 세 가지를 한 화면에 보여줍니다.

Canvas가 애니메이션 배경과 그래픽을 담당
HTML/DOM이 입력·버튼·텍스트 카드와 접근 가능한 UI를 담당
html2canvas가 로드되면 DOM 카드를 별도의 canvas snapshot으로 변환

조사 출처

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas
https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
https://github.com/niklasvh/html2canvas

HTML in Canvas — DOM Overlay & Rasterization

개요

메모