لسنوات، واجه مطورو الويب خيارًا صعبًا عند بناء تطبيقات مرئية عالية التفاعل: إما الاعتماد على DOM لما يوفره من ميزات دلالية غنية، أو العرض على عنصر <canvas> للحصول على أداء رسوميات منخفض المستوى. تزيل واجهة HTML-in-Canvas التجريبية الجديدة، المتاحة الآن في تجربة المصدر، هذا المقايضة. فهي تتيح للمطورين رسم محتوى DOM مباشرة على لوحة ثنائية الأبعاد أو على نسيج WebGL/WebGPU، مع الحفاظ على تفاعل الواجهة وإمكانية وصولها وارتباطها بميزات المتصفح.
يشكّل DOM أساس واجهة الويب. فهو يوفر تخطيطًا مدمجًا للنصوص ومحتوى مفهومًا دلاليًا، ويدعم العمليات اليومية مثل تحديد النص لنسخه أو النقر بزر الفأرة الأيمن على صورة لحفظها. كما يتكامل مع أدوات إمكانية الوصول والترجمة والبحث داخل الصفحة ووضع القراءة والإضافات والوضع الداكن وتكبير المتصفح والتعبئة التلقائية. أما Canvas، بما في ذلك WebGL وWebGPU، فيوفر وصولًا منخفض المستوى إلى البكسلات للرسوميات ثنائية وثلاثية الأبعاد المتقدمة، وهي رسوميات تعتمد عليها الألعاب والتطبيقات المعقدة مثل Google Docs وFigma. غير أن Canvas شبكة من البكسلات، لذلك تفقد الواجهات الموجودة داخله هذه التكاملات مع المتصفح، وغالبًا ما تتطلب منطقًا مخصصًا مكثفًا.
تسد واجهة HTML-in-Canvas هذه الفجوة. فبوضع HTML داخل عنصر <canvas> ومزامنة تحويله، يحصل المطورون على تخطيط نصوص مبسط، وعناصر تحكم في النماذج معبّرة، وتحديد نصوص وقوائم سياق أصلية، وإتاحة شجرة إمكانية الوصول، ودعمًا للبحث داخل الصفحة، وقابلية للفهرسة من قبل زاحفات الويب ووكلاء الذكاء الاصطناعي، وتوافقًا مع الإضافات، وفحصًا عبر أدوات مطوري Chrome. وتشمل حالات الاستخدام التطبيقات الكبيرة القائمة على Canvas، والمشاهد ثلاثية الأبعاد وألعاب الويب، وتجارب WebXR الغامرة التي تحتاج إلى واجهة DOM حقيقية وتفاعلية.
المصدر: Hacker News · لخّصه HeadlinesBriefing