‏حالا می‌شه DOM رو تو Canvas کشید

تیم Chrome تو این پست یه API آزمایشی جدید به اسم HTML-in-Canvas رو معرفی می‌کنه که الان تو origin trial (نسخه ۱۴۸ تا ۱۵۰ کروم) در دسترسه. به گفتهٔ نویسنده‌ها، توسعه‌دهنده‌های وب سال‌ها مجبور بودن سر ساختن اپ‌های بصری پیچیده یه انتخاب سخت بکنن: یا به DOM تکیه کنن که امکانات معنایی و متنی غنی داره، یا مستقیم رو رندر کنن که کارایی گرافیکی پایین‌سطح می‌ده. این API می‌گه دیگه لازم نیست یکی رو انتخاب کنی.

برای فهمیدن ارزش این کار، مقاله نقاط قوت هرکدوم رو مرور می‌کنه. DOM متن رو به‌صورت آماده چیدمان می‌کنه و کلی قابلیت مرورگر بهش وصله: ابزارهای دسترسی‌پذیری، ترجمه، find-in-page، حالت مطالعه، افزونه‌ها، dark mode، زوم و autofill. در مقابل، canvas و WebGL/WebGPU دسترسی پایین‌سطح به یه شبکه از پیکسل‌ها می‌دن که برای بازی‌ها و اپ‌هایی مثل Google Docs یا Figma لازمه. مشکل اینجاست که وقتی UI داخل اون شبکه پیکسلی ثابت گیر می‌افته، همه اون قابلیت‌های مرورگر کامل از کار می‌افتن.

نویسنده‌ها می‌گن این API نقش پلی رو بازی می‌کنه که خوبی هر دو دنیا رو می‌ده. وقتی HTML رو داخل می‌ذاری و transformش رو هماهنگ می‌کنی، محتوا هم کامل تعاملی می‌مونه و هم همه یکپارچگی‌های مرورگر خودکار کار می‌کنن. چیزی که گیرت میاد: چیدمان و قالب‌بندی متن (حتی چندخطی و دوجهته با CSS)، کنترل‌های فرم، انتخاب و کپی/پیست متن و راست‌کلیک، دسترسی‌پذیری از طریق accessibility tree، سرچ با find-in-page حتی داخل تکسچرهای WebGL، قابلیت ایندکس‌شدن توسط خزنده‌ها و ایجنت‌های AI، کارکرد افزونه‌ها و بازرسی محتوا تو Chrome DevTools.

از نظر کاربرد، مقاله دو حوزه اصلی رو نام می‌بره. یکی اپ‌های بزرگ مبتنی بر canvas مثل Google Docs، Miro یا Figma که حالا می‌تونن کامپوننت‌های پیچیده UI رو مستقیم تو فضای کاری canvasشون رندر کنن و هم دسترسی‌پذیری رو بهتر کنن هم حجم باندل رو کم. دومی هم صحنه‌های سه‌بعدی و بازی‌هاست؛ مثلاً یه کتاب سه‌بعدی که از متن واقعی DOM استفاده می‌کنه، یا یه ترمینال درون‌بازی که کپی/پیست واقعی رو پشتیبانی می‌کنه.

برای استفاده، کار تو سه فاز انجام می‌شه: راه‌اندازی canvas، رندر کردن داخلش، و به‌روزرسانی CSS transform تا مرورگر بدونه عنصر دقیقاً کجای صفحه نشسته. قدم اول اینه که خاصیت layoutsubtree رو به تگ canvas اضافه کنی تا مرورگر از محتوای تودرتوش باخبر بشه و به accessibility tree معرفیش کنه:

<canvas id="canvas" style="width: 200px; height: 200px;" layoutsubtree>
  <div id="form_element">
    <label for="name">Name:</label> <input id="name" type="text">
  </div>
</canvas>

بعدش برای رندر، تو context دوبعدی از drawElementImage استفاده می‌کنی، تو WebGL از texElementImage2D و تو WebGPU از copyElementImageToTexture. نکته مهم اینه که transform برگشتی رو روی style.transform عنصر اعمال کنی تا مرورگر بفهمه کلیک یا hover کاربر باید به کجا نگاشت بشه و تعامل درست کار کنه. برای WebGL/WebGPU هم یه تابع کمکی getElementTransform() هست که با ضرب ماتریس‌های MVP، نرمال‌سازی و viewport، محل دقیق قرارگیری عنصر رو حساب می‌کنه.

نکات کلیدی:

• API جدید HTML-in-Canvas اجازه می‌ده محتوای DOM رو مستقیم تو canvas دوبعدی یا تکسچر WebGL/WebGPU بکشی
• محتوای کشیده‌شده هنوز قابل تعامل، قابل‌دسترس، قابل سرچ با find-in-page و قابل ایندکسه
• کاربرد اصلیش اپ‌های سنگین مثل Figma و Google Docs و صحنه‌های سه‌بعدی و بازی‌هاست
• کار تو سه فاز انجام می‌شه و با خاصیت layoutsubtree روی تگ canvas شروع می‌شه؛ فعلاً تو origin trial کرومه