اجرای مستقیم المان‌های HTML در Canvas؛ پایان مرزبندی میان DOM و رندرینگ گرافیکی — The HTML-in-Canvas API origin trial
خلاصه
قابلیت آزمایشی جدید HTML-in-Canvas در کروم به توسعه‌دهندگان اجازه می‌دهد المان‌های واقعی DOM را مستقیماً درون بافت‌های Canvas ،WebGL و WebGPU رندر کنند. با این رویکرد، بدون از دست رفتن دسترس‌پذیری، قابلیت انتخاب متن و تعامل بومی مرورگر، پرفورمنس گرافیکی بالا حفظ می‌شود.
چالش همیشگی: تعامل معنایی DOM یا پرفورمنس خام Canvas؟
توسعه‌دهندگان وب برای ساخت اپلیکیشن‌های تعاملی و پیچیده همیشه بر سر یک دوراهی معماری گیر می‌افتادند: تکیه بر ساختار معنایی DOM یا رندر مستقیم روی المان <canvas>. در ساختارهایی مثل اسناد متنی، پشتیبانی از انتخاب متن، ترجمه خودکار، ابزارهای دسترس‌پذیری (Accessibility)، قابلیت جستجو (Ctrl+F) و ابزارهای توسعه‌دهنده (DevTools) به رایگان در DOM فراهم است؛ اما برای گرافیک سطح پایین، بازی‌ها یا ابزارهای سنگینی مانند Figma، موتور رندرینگ مستقیم نیاز است.
المان <canvas> در واقع فقط شبکه‌ای از پیکسل‌های خام است. اگر توسعه‌دهنده‌ای رابط کاربری را داخل Canvas پیاده‌سازی می‌کرد، ناچار بود موتور چیدمان متن (Text Layout Engine) و سیستم‌های دریافت ورودی را از صفر بازنویسی کند که حجم Bundle نهایی را به شدت افزایش می‌داد و ادغام‌های پیش‌فرض مرورگر را قطع می‌کرد.
قابلیت تجربی HTML-in-Canvas که در قالب Origin Trial برای نسخه‌های ۱۴۸ تا ۱۵۰ کروم (و هم‌اکنون در Chrome Canary 149 به بعد) معرفی شده، آمده تا پلی میان این دو دنیا بزند.
معماری و نحوه کارکرد این API
اساس کار این API، حفظ ساختار سلسله‌مراتبی DOM به همراه موقعیت‌یابی فضایی آن در رندرهای گرافیکی دوبعدی و سه‌بعدی است. پیاده‌سازی آن در سه گام اصلی خلاصه می‌شود:
- آماده‌سازی Canvas: با افزودن اتریبیوت
layoutsubtreeبه تگ<canvas>، مرورگر متوجه می‌شود که المان‌های فرزند قرار است به عنوان بخشی از صحنه ترسیم شوند و درخت دسترس‌پذیری را برای آن‌ها فعال نگه می‌دارد. - رندر در فریم‌های Paint: رندر در هنگام وقوع رویداد
paintصورت می‌گیرد. برای کانتکست دوبعدی از متدdrawElementImageاستفاده می‌شود. در WebGL این کار با متدtexElementImage2Dو در WebGPU از طریق صف کپیcopyElementImageToTextureبا همان المان DOM به عنوان سورس بافت انجام می‌شود. - همگام‌سازی ماتریس انتقال (Transform): برای این‌که مرورگر بداند کلیک، هاور یا فوکوس در کجای صفحه روی می‌دهد، ماتریس تحول هندسی المان با استایل CSS همگام می‌شود. در فضاهای سه‌بعدی پیچیده، با متد جدید
canvas.getElementTransformمی‌توان ماتریس Model-View-Projection را به ماتریس‌های DOM تبدیل و ابعاد المان را در مقیاس Viewport بوم به درستی تراز کرد.
چرا این قابلیت انقلابی است؟
با اجرای این مکانیزم، المان‌هایی که روی یک مش سه‌بعدی در WebGL نشسته‌اند، در واقعیت هنوز یک المان HTML زنده هستند:
- حفظ کامل قابلیت‌های مرورگر: فرم‌ها، اینپوت‌ها، انتخاب و کپی متن و کلیک راست همگی به صورت محلی کار می‌کنند.
- موتور رندر متن و چندزبانه: چیدمان متن‌های چندزبانه و راست‌به‌چپ (RTL) بدون نیاز به پردازش دستی با CSS انجام می‌شود.
- دسترس‌پذیری و ایندکس محتوا: ابزارهای صفحه‌خوان (Screen Readers)، موتورهای جستجو و Agentهای هوش مصنوعی می‌توانند متن صحنه‌های سه‌بعدی را مثل یک صفحه وب معمولی بخوانند.
- پشتیبانی DevTools و افزونه‌ها: می‌توان در Inspector مرورگر استایل دکمه روی یک آبجکت سه‌بعدی را زنده تغییر داد یا از افزونه‌های ترجمه روی آن بهره برد.
کتابخانه‌های گرافیکی محبوب از جمله Three.js (با ویژگی آزمایشی THREE.HTMLTexture) و PlayCanvas پیاده‌سازی اولیه برای این استاندارد را آغاز کرده‌اند.
بازخوردها و نکات امنیتی در Hacker News
در میان بحث‌های جامعه مهندسی در Hacker News، نکته تاریخی جالبی مطرح شد: در دوران شکل‌گیری WebVR، پیاده‌سازی چنین قابلیتی با استناد به مسائل امنیتی (مانند حملات احتمالی Clickjacking، خواندن پیکسل‌های محافظت‌شده یا Pixel Leaks) از سوی اعضای کارگروه و تیم کروم رد می‌شد. برخی تحلیل‌گران اشاره کرده‌اند که تغییر موضع گوگل و فراهم‌سازی این امکان، احتمالاً نشان‌دهنده نیاز زیرساختی یکی از محصولات داخلی خود این شرکت (احتمالاً در حوزه WebXR یا نسخه‌های آینده ابزارهای وب) به چنین قابلیتی است.
این مطلب به‌صورت کاملاً خودکار و با هوش مصنوعی از مقالهٔ اصلی و بحث هکرنیوز تهیه شده و ممکن است خطا داشته باشد. حقوق مطلب اصلی متعلق به نویسندهٔ آن است. قوانین و گزارش مشکل