DevSnack / Web Rendering Lab

HTML in Canvas

Canvas는 그래픽을 그리고, HTML은 UI를 구성합니다. 두 레이어를 겹쳐 쓰고, 필요할 때만 DOM을 별도의 canvas bitmap으로 변환해 보세요.

Canvas bitmap / animation HTML DOM overlay / controls HTML → Canvas snapshot

01 / Compositor Stage Canvas + DOM active

CANVAS LAYER뒤의 격자·입자·파형은 bitmap으로 그려집니다.

HTML DOM OVERLAYLIVE

Signal Garden

Native text, buttons, and layout stay accessible above the canvas.

84%

signal clarity
computed in DOM

Canvas픽셀 그래픽과 애니메이션을 담당합니다.

HTML / DOM텍스트·입력·버튼·포커스를 담당합니다.

SnapshotDOM을 별도 bitmap으로 복사한 결과입니다.