वर्षों से, वेब डेवलपर्स को अत्यधिक इंटरैक्टिव विज़ुअल एप्लिकेशन बनाते समय एक कठिन विकल्प का सामना करना पड़ा है: अपने समृद्ध सिमेंटिक फ़ीचर्स के लिए DOM पर निर्भर रहें, या निम्न-स्तरीय ग्राफ़िक्स प्रदर्शन के लिए <canvas> एलिमेंट पर रेंडर करें। नई प्रायोगिक HTML-in-Canvas API, जो अब ओरिजिन ट्रायल में उपलब्ध है, इस समझौते को समाप्त करती है। यह डेवलपर्स को DOM सामग्री को सीधे 2D कैनवस या WebGL/WebGPU टेक्सचर में बनाने देती है, जबकि इंटरफ़ेस को इंटरैक्टिव, सुलभ और ब्राउज़र सुविधाओं से जुड़ा रखती है।
DOM वेब UI की नींव है। यह बिल्ट-इन टेक्स्ट लेआउट और सिमेंटिक रूप से समझी जाने वाली सामग्री प्रदान करता है, और रोज़मर्रा के कार्यों जैसे कॉपी करने के लिए टेक्स्ट हाइलाइट करना या सेव करने के लिए किसी इमेज पर राइट-क्लिक करने का समर्थन करता है। यह एक्सेसिबिलिटी टूल्स, अनुवाद, पेज में खोज, रीडर मोड, एक्सटेंशन, डार्क मोड, ब्राउज़र ज़ूम और ऑटोफ़िल के साथ भी एकीकृत होता है। WebGL और WebGPU सहित कैनवस उन्नत 2D और 3D ग्राफ़िक्स के लिए निम्न-स्तरीय पिक्सल एक्सेस देता है, जिस पर गेम और Google Docs तथा Figma जैसे जटिल एप्लिकेशन निर्भर करते हैं। हालांकि, चूंकि कैनवस पिक्सल का एक ग्रिड है, इसके भीतर के UI इन ब्राउज़र एकीकरणों को खो देते हैं और अक्सर भारी कस्टम लॉजिक की आवश्यकता होती है।
HTML-in-Canvas API इस अंतर को पाटती है। <canvas> एलिमेंट के भीतर HTML रखकर और उसके ट्रांसफ़ॉर्म को सिंक्रोनाइज़ करके, डेवलपर्स को सरल टेक्स्ट लेआउट, अभिव्यंजक फ़ॉर्म कंट्रोल, नेटिव टेक्स्ट चयन और कॉन्टेक्स्ट मेनू, एक्सेसिबिलिटी ट्री एक्सपोज़र, पेज में खोज समर्थन, क्रॉलर और AI एजेंटों के लिए इंडेक्सेबिलिटी, एक्सटेंशन संगतता और Chrome DevTools निरीक्षण मिलता है। उपयोग के मामलों में बड़े कैनवस-आधारित एप्लिकेशन, 3D दृश्य और वेब गेम, और इमर्सिव WebXR अनुभव शामिल हैं जिन्हें वास्तविक, इंटरैक्टिव DOM UI की आवश्यकता होती है।
स्रोत: Hacker News · HeadlinesBriefing द्वारा सारांशित