designpaca/research/canvas/02-availability.md

02. 가용성 — 버전 / 플래그 / Origin Trial / 타 브라우저 입장

조사 기준일: 2026-08-20 이 시점의 Chrome Stable은 151 (152는 2026-08-25 릴리스 예정). 출처: chromiumdash 마일스톤 스케줄 API

---

1. 결론 먼저

❌ 지금 프로덕션에 쓸 수 없다 — 단, "점진적 향상"으로는 오늘 넣을 수 있다

질문	답
Stable Chrome에서 기본 켜져 있나?	아니다. chromestatus 상태는 여전히 In development이고, desktop/android/webview 출시 마일스톤이 전부 null이다.
일반 사용자가 볼 수 있나?	Origin Trial 토큰을 등록한 오리진에 한해 Chrome 148~154 사용자에게 보인다. 그 외에는 chrome://flags 수동 활성화 필요.
Chromium 계열 외 브라우저는?	전혀 지원 없음. Firefox·Safari 모두 "No signal"(입장 미표명), 구현 계획 없음.
스펙은 확정됐나?	아니다. WHATWG PR #11588은 2025-08-21 개설 후 여전히 open/미머지. 2026년 상반기에만 메서드 시그니처(WebGL/WebGPU)가 두 번 바뀌었다.
안정화 예상	공식 예상 없음. Chrome 팀이 OT를 M150 → M154로 연장하며 밝힌 사유가 "상당한 피드백을 받았고 (WebGL/WebGPU API, 프라이버시에) 중대한 변경을 했다"이므로, 최소 M155(2026-10-06) 이후에나 Intent to Ship이 가능하다. Firefox/Safari 신호가 없는 한 진짜 Baseline까지는 수년 단위.

실무 권고

1. 핵심 UX를 이 API에 의존시키지 마라. 기능 감지 후 미지원이면 평범한 HTML로 폴백되는 구조여야 한다 (CanvasUI가 채택한 모델: "런타임에 지원을 감지하고 우아하게 degrade — API가 없으면 콘텐츠는 그냥 일반 HTML로 렌더되고, 여전히 돌 수 있는 효과 부분은 계속 돈다").
2. API 이름을 코드 전반에 흩뿌리지 마라. 2025-08 이후 메서드명이 3번(drawElement→drawHTMLElement→drawHTML→drawElementImage), 3D 시그니처가 2번 바뀌었다. 얇은 어댑터 레이어 하나로 감싸라 (03-code-examples.md §7 참조).
3. 데모·포트폴리오·실험·사내 도구에는 지금 써도 된다. 특히 Chrome 사용자가 절대다수인 크리에이티브 포트폴리오라면 OT 토큰 + 폴백 조합으로 실전 투입 가능하다.
4. 폴백이 필요하면 three-html-render 폴리필(foreignObject 기반)이 같은 API 표면을 제공한다 → 04-fallbacks.md.

---

2. Chrome 타임라인

단계	마일스톤	플랫폼	비고
DevTrial (플래그)	M138부터	Desktop / Android / WebView 전부	chrome://flags/#canvas-draw-element
Origin Trial (최초)	M148 ~ M150	Desktop / Android / WebView	Intent to Experiment 승인
Origin Trial (연장 1회차)	~ M154	Desktop	Intent to Extend Experiment, Mike Taylor LGTM 2026-06-11
Intent to Ship	—	—	아직 없음

마일스톤 → 실제 날짜 (chromiumdash 공식 스케줄)

마일스톤	Branch	Beta	Stable
M148	2026-04-06	2026-04-08	2026-05-05
M150	2026-06-01	2026-06-03	2026-06-30
M152	2026-07-27	2026-07-29	2026-08-25
M153	2026-08-17	2026-08-19	2026-09-08
M154	2026-08-31	2026-09-02	2026-09-22
M155	2026-09-14	2026-09-16	2026-10-06

→ Origin Trial은 2026-08-20 현재 진행 중이며, M154(2026-09-22 Stable)까지 유효하다. 실무적으로 M155가 Stable에 도달하는 2026-10-06 무렵 만료된다고 보면 된다. (추가 연장 가능성 있음 — 1차 연장 전례가 있다.)

OT 연장 사유 (Intent to Extend Experiment 원문 요지)

"상당한 피드백을 받았고 중대한 변경(WebGL/WebGPU API, 프라이버시)을 했기 때문에, 이 단계에서 개발자 입력을 계속 수집하고자 한다."

---

3. 지금 당장 켜는 방법

3.1 개발자 본인 브라우저 (플래그)

chrome://flags/#canvas-draw-element

→ Enabled 로 설정하고 브라우저 재시작.

• 플래그 이름: canvas-draw-element (옛 메서드명 drawElement 시절에 붙은 이름이라 현재 API명과 다르다. 이름은 바뀌지 않았다.)
• Chrome Canary 149 이상이 Chrome 공식 권장 (Chrome for Developers 블로그).
• 커맨드라인 대안: --enable-blink-features=CanvasDrawElement (three.js PR #31233이 안내하는 구버전용 방법)
• 서드파티 보고: Brave Stable(Chromium 147+) 및 기타 Chromium 계열에서도 같은 플래그로 켜진다 (html-in-canvas.dev). Google 1차 출처는 아님.

3.2 실제 사용자에게 노출 (Origin Trial 토큰)

등록: https://developer.chrome.com/origintrials/#/view_trial/3478467762190286849

토큰을 받아 다음 중 하나로 주입:

<meta http-equiv="origin-trial" content="TOKEN_HERE">

Origin-Trial: TOKEN_HERE   (HTTP 응답 헤더)

• 대상: Desktop / Android / WebView
• 3rd-party origin trial 지원 여부는 미확인 (트라이얼 등록 페이지가 로그인 벽 뒤에 있어 확인 불가). 서드파티 스크립트로 배포할 계획이라면 등록 시 확인 필요.

3.3 기능 감지

const HAS_HIC =
  typeof HTMLCanvasElement !== 'undefined' &&
  'requestPaint' in HTMLCanvasElement.prototype &&
  'drawElementImage' in CanvasRenderingContext2D.prototype;

three.js 공식 예제가 쓰는 판정은 'requestPaint' in HTMLCanvasElement.prototype 하나다. 2D만 쓸 거면 drawElementImage까지, WebGL이면 'texElementImage2D' in WebGL2RenderingContext.prototype, WebGPU면 'copyElementImageToTexture' in GPUQueue.prototype를 추가로 본다.

---

4. 타 브라우저 입장 (standards positions)

엔진	입장	트래커	비고
Gecko / Firefox	No signal (미표명)	mozilla/standards-positions#1076	2024-09-25 개설, 여전히 open, 라벨은 "Needs proposed position". Mozilla Graphics 팀(nical) 배정. chromestatus의 Chrome 팀 주석: "Mozilla는 spec을 stage 2(대략적 API 모양에 대한 합의)로 진행시키는 데 반대하지 않았고, 우리는 핑거프린팅·호환성에 대한 그들의 우려를 해소하기 위해 적극적으로 작업 중이다."
WebKit / Safari	No signal (미표명)	WebKit/standards-positions#630	open. @annevk, @smfr, @shallawa, @cookiecrook 태그됨. 이슈 본문에 WebKit 엔지니어 코멘트나 공식 라벨 없음. 배경 메모: 이전 제안(canvas place element #403)에서 retained-mode 캔버스에 대한 우려 때문에 immediate-mode API 설계로 회귀했다고 기재.
웹 개발자	Positive	whatwg/html#10650 코멘트	DevTrial 사용자들의 긍정 신호. 커뮤니티 데모가 폭발적으로 나오는 중.
W3C TAG	리뷰 진행	w3ctag/design-reviews#1204	—

정리: Chromium 단독 구현이고, 다른 두 엔진 어느 쪽도 "구현하겠다"고 말한 적이 없다. Mozilla의 "stage 2 진행에 반대 안 함"은 지지가 아니라 논의 진행 허용에 가깝다.

---

5. 표준화 상태

항목	상태
WHATWG HTML PR	#11588 "Add HTML-in-Canvas APIs" — open, 미머지 (2025-08-21 개설, 저자 foolip)
성숙도 (chromestatus)	"Specification currently under development in a Working Group" (Working draft)
Explainer	living document, 계속 갱신 중 (2026-07-14이 마지막 주요 갱신)
미해결 스펙 이슈	① dictionary 기반 API의 GC 압박, ② ElementImage의 교차 캔버스 사용 허용 여부, ③ 중첩 canvas — explainer는 허용하나 Chromium Canary는 가장 가까운 canvas 조상으로 제한(구현 불일치), ④ paint 타이밍과 paint-timing 스펙의 조율
스펙 PR과 explainer 불일치	PR #11588 본문에는 아직 폐기된 setHitTestRegions()와 drawable 속성이 남아 있다. 구현 기준은 explainer

---

6. 프레임워크/라이브러리 지원 현황 (2026-08 기준)

라이브러리	API	상태
three.js	THREE.HTMLTexture(element) + three/addons/interaction/InteractionManager.js	r184에 정식 포함 (dev 브랜치 2026-04-10 머지). WebGLRenderer / WebGPURenderer 양쪽 지원
PlayCanvas	device.supportsHtmlTextures, texture.setSource(el)	지원. WebGL 백엔드만, WebGPU는 대기 중
PixiJS	rendering.HTMLSource	지원 (WebGL & WebGPU)
Babylon.js	HTML Texture	지원
CanvasUI (canvasui.dev, David Haz)	40+ 이펙트 컴포넌트, shadcn 레지스트리 방식	React/Solid/Preact/Vue/Svelte/vanilla TS. 런타임 지원 감지 + graceful degradation 내장
three-html-render (repalash)	installHtmlInCanvasPolyfill()	폴리필. 네이티브 있으면 fast path, 없으면 foreignObject 래스터화. MIT
Remotion	custom-html-in-canvas 트랜지션 프레젠테이션	지원

---

7. 영상의 "아직 못 쓴다"는 말과 실제의 차이

노마드코더 영상은 "Chrome Canary의 플래그 뒤에 있다"고만 말하는데, 정확히는:

• 영상 시점 기준으로도 Origin Trial이 이미 열려 있었다 (M148 = 2026-05-05 Stable). 즉 사이트 소유자가 토큰을 등록하면 일반 Chrome Stable 사용자에게도 동작시킬 수 있다.
• 영상의 "시그니처와 API의 기본 모양이 아직 바뀔 수 있다"는 경고는 정확하다. 실제로 2026-04~06에 WebGL/WebGPU 시그니처가 바뀌었고, WICG 공식 데모조차 try/catch로 신·구 양쪽을 지원하고 있다.
• 영상의 API 이름(canvas place element, drawElement)은 구 명칭이다. 현재는 html-in-canvas / drawElementImage.