‏HTML-in-Canvas تو Chrome 157 رسماً اومد

طبق پست وبلاگ Chrome for Developers، Chrome 157 نسخهٔ پایدار HTML-in-Canvas API رو منتشر کرده. این API بعد از یه origin trial (یعنی دوره‌ای که فقط سایت‌های ثبت‌نام‌شده می‌تونستن امتحانش کنن) حالا برای همه فعاله. ایده‌ش ساده‌ست: HTML معمولی رو بذاری داخل و مرورگر خودش اونو توی تصویر canvas بکشه، چه 2D باشه چه WebGL چه WebGPU.

تا قبل از این، دو راه بیشتر نداشتی. یا متن و کنترل‌ها رو با fillText() مستقیم پیکسل به پیکسل می‌کشیدی، که یعنی صفحه‌خوان چیزی نمی‌دید، Ctrl+F و کپی و ترجمه کار نمی‌کرد و برای زبان‌های مختلف باید موتور چیدمان متن سنگین با خودت می‌آوردی. یا HTML رو روی canvas شناور می‌کردی، که موقع اسکرول یا چرخوندن دوربین سه‌بعدی لرزش و عقب‌موندن داشت، نمی‌شد HTML رو پشت یه شیء سه‌بعدی یا داخل آینه گذاشت، و باید هر فریم style.transform رو با جاوااسکریپت آپدیت می‌کردی.

حالا HTMLی که داخل canvas رندر می‌شه همهٔ امکانات HTML بیرون رو داره: چیدمان متن دوطرفه، فرم‌ها، انتخاب متن و کلیک راست، درخت دسترس‌پذیری، ترجمه و autofill، افزونه‌های مرورگر و حتی بررسی CSS تو DevTools. خزنده‌ها و ایجنت‌های هوش مصنوعی هم می‌تونن این محتوا رو بخونن. خروجی گرفتن با toDataURL()، toBlob() و captureStream() هم با DOM زنده جواب می‌ده.

روند کار سه مرحله داره. اول به canvas ویژگی content="drawable" می‌دی و المان فرزند رو drawable علامت می‌زنی. بعد المان رو تو کانتکست مورد نظرت می‌کشی. مثلاً تو 2D این شکلیه:

const ctx = canvas.getContext("2d");
// Draw HTML element into canvas in 2D
ctx.drawElementImage(myElement, myElementX, myElementY);

مرحلهٔ سوم اختیاریه: هماهنگ کردن جای المان در DOM با پیکسل‌ها. تو 2D مرورگر خودش انجامش می‌ده، ولی تو WebGL و WebGPU باید یه ماتریس DOMMatrix بسازی و به canvas.updateElementGeometry() بدی. نکتهٔ مهم اینه که دیگه مرورگر نیاز نداره CSS رو parse کنه یا استایل رو هر فریم دوباره حساب کنه، پس کار main thread با زیاد شدن المان‌ها بالا نمی‌ره.

کتابخونه‌های گرافیکی معروف هم پشتیبانی رو شروع کردن: Three.js به‌صورت آزمایشی با THREE.HTMLTexture، PlayCanvas با setSource()، Babylon.js با BABYLON.HtmlTexture و PixiJS از نسخهٔ v8.19.0 با HTMLSource. برای مرورگرهای دیگه هم پیشنهاد شده اول پشتیبانی رو چک کنی (یه canvas بسازی، content رو drawable بذاری و ببینی مقدارش موند یا نه) و اگه نبود سراغ overlay یا کتابخونه‌هایی مثل html2canvas بری.

نکات کلیدی:

• HTML-in-Canvas از Chrome 157 به نسخهٔ پایدار رسیده و تو 2D، WebGL و WebGPU کار می‌کنه.
• فعال‌سازی با ویژگی content="drawable" روی canvas و drawable روی المان فرزند انجام می‌شه.
• تو 2D متد drawElementImage() المان رو می‌کشه و جاش رو خودکار هماهنگ می‌کنه؛ تو 3D باید ماتریس رو به updateElementGeometry() بدی.
• دسترس‌پذیری، Find-in-Page، ترجمه، autofill و DevTools روی محتوای داخل canvas کار می‌کنن.
• Three.js، PlayCanvas، Babylon.js و PixiJS 8.19.0 از این API پشتیبانی می‌کنن.
• برای مرورگرهای بدون پشتیبانی، fallback با overlay یا کتابخونه‌هایی مثل html2canvas و dom-to-image پیشنهاد شده.