html-in-canvas
Installation
SKILL.md
HTML-in-Canvas 스킬
살아있는 DOM(<input>, <video>, CSS 애니메이션 포함)을 canvas 픽셀로 촬영해 자유 변형·상호작용하는 실험 API를 다루는 지식 패키지.
검증일 2026-08-20 — Chrome Canary,
chrome://flags/#canvas-draw-elementEnabled 기준. 실험 API라 빌드마다 이름·시그니처·동작이 다르다. 아래 규칙은 전부 실제 빈 화면/예외를 디버깅해서 얻은 것이므로 생략하면 같은 함정을 다시 밟는다.
절대 규칙 (위반 시 증상 병기)
| # | 규칙 | 위반 시 증상 |
|---|---|---|
| 1 | 촬영은 소스 canvas의 paint 이벤트 핸들러 안에서만. rAF에서는 src.requestPaint?.()로 요청만 |
InvalidStateError: No cached paint record for element — 매 프레임 거부되어 영원히 빈 화면 |
| 2 | 시그니처 3종 (el,x,y) → (el,x,y,w,h) → (el) 순차 try + 실패 시 세 에러 전부 나열 |
마지막 시도의 "3 arguments required"가 진짜 원인을 가림 |
| 3 | 소스 canvas 숨김은 position:absolute; z-index:-1 겹침만. display:none·visibility:hidden·left:-9999px 금지 |
페인트 생략 → 투명(빈) 촬영 |
| 4 | rAF 루프 전체 try/catch + 예외는 페이지 내 빨간 에러 박스에 표시, 루프는 계속 | 첫 프레임 예외로 루프가 조용히 죽어 "그냥 빈 화면" |
| 5 | getImageData/toDataURL 금지 (촬영한 canvas는 오염됨) |
SecurityError |
| 6 | 소스 요소는 소유 canvas(layoutsubtree 속성)의 자식이어야 함. 효과는 버퍼 패턴: 소스에 촬영 → drawImage로 표시 canvas에 변형 복사 |
형제/외부 요소는 촬영 불가 또는 paint 기록 미보장 |
| 7 | 모든 실험 API 호출은 감지 가드 뒤에. 미지원 시 데모 대신 요구 사항 안내만 표시 (Chromium 146 이상 + 플래그, DOM 폴백 금지) | 일반 브라우저에서 즉사 |
| 8 | 첫 90프레임(~1.5초)은 실패해도 에러 표시 유보 (초기 레이스) | 정상 동작인데 오탐 에러 |