Show GN: 웹 canvas에 HTML DOM을 그려보자 (크롬 HTML-in-Canvas)

안녕하세요.

지금까지 여러가지 캔버스 에디터로 만든 프로젝트를 운영하고 있습니다.

네이티브 canvas부터 konva, fabric도 사용해보고 최근엔 skia기반 canvasKit도 사용해보고 있습니다.

canvas가 생각보다 매우 까다로워서 간단한 click 이벤트를 구현하려 해도 버튼 그려놓고, 좌표 구하고, 클릭 이벤트로 마우스 좌표 구해서 어쩌고 저쩌고~~~~ 해서 구현해야 했는데 이번에 크롬에서 실험적 기능이 새로 나왔더라구요 (HTML-in-Canvas)

그래서 여러가지 테스트해보고 토큰도 아낄 겸, 클로드 코드 스킬(플러그인) 으로 만들었습니다.

아직 단점도 많지만 구글에서 꼭 정식 기능으로 나왔음 좋겠네요

데모: https://greekr4.github.io/canvas-ui/

(Chromium 146 이상 + chrome://flags/#canvas-draw-element 필요)