HTML-in-Canvas: Đề xuất API mới để render trực tiếp nội dung HTML lên Canvas

• HTML-in-Canvas là một dự án của WICG đề xuất một API chuẩn mới cho phép vẽ trực tiếp phần tử/nội dung HTML trong phần tử <canvas>
• Được đưa ra để giải quyết các vấn đề về bố cục văn bản phức tạp, accessibility, quốc tế hóa, chất lượng/hiệu năng, và cho phép tận dụng trực tiếp kiểu dáng HTML trong các trường hợp dùng Canvas đa dạng như biểu đồ, UI, menu game
• Thông qua các phương thức mới drawElement, texElement2D, setHitTestRegions, có thể render và texture hóa phần tử HTML trực tiếp trên ngữ cảnh Canvas 2D hoặc WebGL
• Bao gồm nhu cầu thực tế của nhà phát triển web app về vùng tương tác, cải thiện accessibility, UI 2D trong cảnh 3D, layout dựa trên CSS/HTML
• Hiện tại có thể kích hoạt thử nghiệm bằng flag trên Chrome Canary (từ bản 138.0.7175.0), và mọi phản hồi, báo lỗi đều được chào đón

---

Tổng quan và tầm quan trọng

• Đề xuất API mới cho phép vẽ trực tiếp phần tử HTML vào <canvas>
• Trước đây, khi render layout phức tạp, văn bản và nội dung dựa trên HTML lên <canvas>, chưa có cách làm thuận tiện, nên có giới hạn về accessibility, quốc tế hóa, hiệu năng và chất lượng
• HTML-in-Canvas là lớp bổ sung để hỗ trợ render HTML trong Canvas 2D và WebGL, nâng cao tính ứng dụng trong biểu đồ, hộp rich text, UI game và nhiều khu vực khác

Trường hợp sử dụng

• Việc biểu diễn nội dung văn bản và layout đã được style bên trong canvas
  • Ví dụ: chú giải và trục của biểu đồ, hộp rich editor, menu trong game
• Tăng cường accessibility
  • Giải quyết sự không khớp giữa nội dung thay thế của canvas truyền thống và nội dung thực sự được render
  • API mới cho phép đồng bộ hóa thông tin accessibility
• Kết hợp HTML với shader của WebGL
  • Hỗ trợ nhu cầu kết hợp HTML với shader WebGL thông thường, vượt ra ngoài hiệu ứng CSS filter
• Render HTML trong ngữ cảnh 3D
  • Có thể chèn nội dung 2D rich vào khu vực 3D của game/website

API đề xuất và tính năng chính

• Kích hoạt layout của các phần tử HTML con trên canvas bằng thuộc tính <canvas layoutsubtree> (mặc định chỉ render trực quan, không hiển thị cho các thuật toán điều hướng trang của UA)
• CanvasRenderingContext2D.drawElement(element, x, y, options)
  • Render phần tử HTML con của canvas tại vị trí đã chỉ định
  • options.allowReadback kiểm soát chống rò rỉ dữ liệu (chính sách tainting sẽ áp dụng về sau)
  • Có thể resize theo dwidth/dheight
• WebGLRenderingContext.texElement2D(...)
  • Vẽ trực tiếp phần tử HTML đã chỉ định thành texture WebGL để dùng trong cảnh 3D
• setHitTestRegions
  • Kết nối phần tử đã render ở một vùng với sự kiện hit test của canvas để tự động chuyển hướng sự kiện chuột/cảm ứng
• Tùy chọn fireOnEveryPaint (ResizeObserver)
  • Tự động phát hiện thời điểm vẽ lại canvas khi nội dung HTML thay đổi/bố trí lại

Hoạt động và giới hạn

• Khi gọi drawElement, sẽ áp dụng ma trận transform của canvas (CTM) và chỉ clip ảnh trong border box của phần tử
• Hình ảnh đã vẽ lên canvas là tĩnh (nếu phần tử thay đổi, cần gọi drawElement lại)
• Không hỗ trợ với canvas không có trong DOM hoặc offscreen canvas (giới hạn kỹ thuật)
• Các phần tử có khả năng tương tác (nút, form, v.v.) có thể được render, nhưng không tự động tương tác
• iframe cross-origin, SVG foreignObject không được hỗ trợ
• Các vấn đề về accessibility, bảo mật và quyền riêng tư (PII) vẫn đang được bàn thảo tiếp tục

Ví dụ demo

• Ví dụ complex-text: vẽ trực tiếp bằng drawElement các chữ có style HTML, hộp và layout phức tạp trên canvas
• Ví dụ webGL: dùng texElement2D tạo texture HTML và map lên cube 3D
• Ví dụ text-input: dùng setHitTestRegions, fireOnEveryPaint để hiển thị vùng tương tác cho form nhập liệu

Thử nghiệm dành cho nhà phát triển và lưu ý

• Kích hoạt trên Chrome Canary bằng flag --enable-blink-features=CanvasDrawElement
• Do nội dung canvas không bị tainted, cần chú ý tránh rò rỉ dữ liệu cá nhân
• API và hành vi vẫn tiếp tục thay đổi, và hiện vẫn thiếu các trường hợp thử nghiệm HTML quy mô lớn
• Khuyến khích gửi feedback: nên báo cáo qua GitHub Issue về tương thích, các trường hợp render thất bại, vấn đề accessibility

Giá trị ứng dụng và triển vọng

• Trong biểu đồ, trực quan hóa dữ liệu, UI trong canvas, HUD/menu game trong 3D, v.v., giúp nâng cao khả năng biểu đạt và năng suất của web
• Những chuyển đổi HTML→Canvas trước đây khó (style, layout, hỗ trợ đa ngôn ngữ, accessibility) giờ có thể xử lý trực tiếp bằng API chuẩn
• Được kỳ vọng là công nghệ mạnh mẽ cho lập trình viên web đồ họa, game và app