‫HTML-in-Canvas ב-Chrome 157: ‏DOM אינטראקטיבי ב-2D, ב-WebGL וב-WebGPU

Natalia Markoborodova

תאריך פרסום: 26 באוקטובר 2026

אחרי גרסת מקור לניסיון מוצלחת, גרסה 157 של Chrome היא הגרסה היציבה הרשמית של HTML-in-Canvas API. ‫HTML-in-Canvas API מגשר על הפער בין העולם האינטראקטיבי והנגיש של ה-DOM לבין השליטה ברמת הפיקסלים ובביצועים גבוהים של <canvas>. ה-API הזה נותן לכם את הטוב משני העולמות – יכולות דפדפן עשירות וגרפיקה של קנבס עם האצת GPU.

הדילמה: Canvas לעומת DOM

בעבר, כשנוצרו אפליקציות אינטרנט עם דרישות ויזואליות גבוהות, היה צריך לבחור בין רכיבי HTML רגילים לבין הקשרים של קנבס גולמי.

לפני HTML-in-Canvas

לפני ה-API הזה, אם פיתחתם ממשקי משתמש עם הרבה רכיבי קנבס, הייתם צריכים לבחור בין שתי גישות, שלכל אחת מהן יש חסרונות משלה:

1. עיבוד טקסט ישירות כפיקסלים של אזור העריכה (fillText()): אפליקציות ציירו טקסט ורכיבים אינטראקטיביים באופן אימפרטיבי כפיקסלים גולמיים. לגישה הזו היו החסרונות הבאים:
   • בעיות נגישות: קוראי מסך וכלים מסייעים לא יכולים לקרוא פיקסלים של רכיב canvas, אלא אם יוצרים ומסנכרנים באופן ידני DOM חלופי בלתי נראה.
   • אובדן תכונות של הדפדפן: המשתמשים לא יכולים לחפש באמצעות "חיפוש בדף" (Ctrl/Cmd+F), להעתיק ולהדביק טקסט באופן טבעי, להפעיל תפריטי הקשר או להשתמש בתרגום ובבדיקת איות של הדפדפן.
   • מנועי טיפוגרפיה מורכבים: כדי לתמוך בהתאמה לשפות ותרבויות שונות, צריך לכלול מנועי פריסה גדולים של JavaScript.
2. שכבות-על צפות של HTML מעל אזור הציור: לדוגמה, שימוש בספריות שממקמות רכיבי HTML רגילים מעל אזור הציור על ידי חישוב של תיבות תוחמות וטרנספורמציות של מטריצות ב-JavaScript. החסרונות של הגישה הזו כוללים:
   • עיכוב בסנכרון וקריעת מסך: גלילה, שינוי מרחק התצוגה או תנועות מצלמה בתלת-ממד יכולים לגרום לרכיבי ה-DOM של שכבת-העל לזוז או לרעוד ביחס לפיקסלים של ה-canvas בגלל הבדלים בזמן רינדור פריים.
   • מגבלות על חיתוך וסדר Z: שכבות-על של HTML תמיד נמצאות מעל כל מאגר הנתונים של לוח הציור. הטמעת HTML בתוך סצנה תלת-ממדית (לדוגמה, מאחורי אובייקט תלת-ממדי, בתוך חומר זכוכית או השתקפות במראה) לא הייתה אפשרית בלי פתרונות עקיפים מורכבים של iframe לתמונה.
   • תקורה בביצועים: כדי לשמור על התאמה בין שכבות-העל לבין ה-canvas, צריך לחשב מחדש את הטרנספורמציה של כל שכבת-על ב-JavaScript ולכתוב אותה ב-style.transform בכל פריים. לאחר מכן, הדפדפן מנתח כל מחרוזת ומחשב מחדש את הסגנון של הרכיב לפני שהוא יכול לעבד את המסגרת, כך שהעבודה ב-main-thread גדלה עם כל שכבת-על שמוסיפים. בהקשר דו-ממדי, drawElementImage() מעדכן את מיקום הרכיב בשבילכם. ב-WebGL וב-WebGPU, אתם מעבירים את הטרנספורמציה שאתם מחשבים אל updateElementGeometry() כמטריצה. בכל מקרה, הדפדפן לא מנתח את ה-CSS או מחשב מחדש את הסגנונות.

היתרונות העיקריים של HTML-in-Canvas

HTML-in-Canvas מבטל את הפשרות האלה. כשממקמים HTML בתוך הרכיב <canvas>, התוכן נשאר אינטראקטיבי וכל השילובים של הדפדפן פועלים באופן אוטומטי.

לתוכן HTML שעבר עיבוד בתוך <canvas> יש את אותן יכולות כמו ל-HTML מחוץ ל-<canvas>:

• פריסה ועיצוב של טקסט: תמיכה בפריסה ובעיצוב של טקסט, כולל טקסט מרובה שורות או דו-כיווני עם סגנונות CSS.
• פקדי טפסים: פקדי טפסים אקספרסיביים עם אפשרויות נרחבות להתאמה אישית של CSS והצללה.
• בחירת טקסט, העתקה והדבקה ולחיצה ימנית: המשתמשים יכולים להדגיש טקסט בתוך סצנות תלת-ממדיות או להפעיל תפריטי הקשר.
• נגישות: תוכן HTML שמוצג בתוך ה-canvas נחשף לעץ הנגישות של קוראי המסך.
• שילוב תכונות של הדפדפן: תכונות של הדפדפן כמו תרגום, מילוי אוטומטי וחיפוש בדף פועלות באופן מיידי. המשתמשים יכולים לתרגם או לחפש טקסט בתוך טקסטורות של WebGL ו-WebGPU.
• שילוב תוספים: תוספים לדפדפן פועלים על התוכן. לדוגמה, תוסף להחלפת טקסט מעדכן באופן אוטומטי את הטקסט שמוצג ברשתות התלת-ממדיות.
• שילוב עם כלי הפיתוח: אפשר לבדוק ולשנות סגנונות CSS של רכיבים בממשק המשתמש של ה-Canvas ישירות בכלי הפיתוח ל-Chrome.
• יכולת הוספה לאינדקס וסוכני AI: סורקי אינטרנט וסוכני AI יכולים להוסיף לאינדקס תוכן DOM שעבר עיבוד לסצנות דו-ממדיות ותלת-ממדיות.
• עריכה וייצוא של מדיה: ייצוא של קומפוזיציות קנבס מלאות שמכילות רכיבי DOM פעילים ישירות לתמונות (toDataURL(), toBlob()) או לסטרימינג של וידאו (captureStream()).

תרחישי שימוש עיקריים

HTML-in-Canvas מאפשר להשתמש ביכולות בכמה תחומים:

• אפליקציות גדולות שמבוססות על רכיבי Canvas: אפליקציות אינטרנט כבדות יכולות לעבד רכיבי ממשק משתמש ישירות בסביבות עבודה של Canvas, וכך לשפר את הנגישות ולהקטין את גודל החבילה.
• משחקים וסצנות בתלת-ממד: משחקים וחוויות WebXR סוחפות יכולים למקם רכיבי DOM אינטראקטיביים, כמו מסופים במשחק או ספרים קריאים בתלת-ממד, ישירות בתוך הסצנות.
• עריכה וייצוא של מדיה: כלי קריאייטיב שמשלבים טיפוגרפיה עשירה ב-HTML עם אפקטים של הצללה יכולים לייצא סצנות מורכבות ישירות לתמונות או לסטרימינג של וידאו.
• ממשקי משתמש אקספרסיביים: אתם יכולים לשנות תוכן HTML כפיקסלים גולמיים כדי ליצור אפקטים חזותיים מבוססי-הצללה.

מדריך למתחילים: HTML ב-Canvas

כדי לעבד HTML ב-canvas, צריך לבצע את השלבים הבאים:

1. מכינים את אזור העריכה. מגדירים באופן הצהרתי את המאפיינים הנכונים כדי שהדפדפן ידע שהוא צריך לעבד HTML לתוך קנבס. ההגדרה הזו זהה בהקשרים של 2D,‏ WebGL ו-WebGPU. איך מגדירים את ה-canvas ואיך מגדירים רכיבי HTML שישורטטו באופן עצמאי.

   <!-- Prepare your canvas by setting the `content` attribute -->
   <canvas id="canvas" width="600" height="400" content="drawable">
     <!-- Mark child as `drawable` to render to canvas -->
     <div id="myElement" drawable>
       <!-- Your HTML here -->
     </div>
   </canvas>
   

2. מציירים את תמונת הרכיב באזור העריכה. ההטמעה המדויקת תלויה באופן שבו אתם מעבדים HTML בהקשר של 2D,‏ WebGL או WebGPU.

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

3. אופציונלי: מסנכרנים את ה-DOM והפיקסלים. סנכרון הגיאומטריה תלוי גם בהקשר שבו אתם משתמשים. בדו-ממד, הדפדפן מטפל בזה באופן אוטומטי כברירת מחדל, ואילו בהקשרים תלת-ממדיים צריך ליצור טרנספורמציה ולהעביר אותה ל-method‏ updateElementGeometry.

   // In 3D, construct a transform as needed, for example:
   const transform = new DOMMatrix().translate(x, y);
   // Synchronize the element's DOM and pixels
   canvas.updateElementGeometry(myElement, { canvasTransform: transform });
   

תמיכה ב-framework ובסביבה העסקית

ספריות WebGL וגרפיקה תלת-ממדית עיקריות תומכות ב-HTML-in-Canvas:

• ‫Three.js: תמיכה ניסיונית באמצעות THREE.HTMLTexture.

  const material = new THREE.MeshBasicMaterial();
  material.map = new THREE.HTMLTexture(uiElement);
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
  scene.add(mesh);
  

• ‫PlayCanvas: תומך בסטרימינג של טקסטורות ב-HTML באמצעות setSource().

  canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
  }, { once: true });
  

• ‫Babylon.js: מספק קישור מובנה דרך BABYLON.HtmlTexture.

  const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
  material.diffuseTexture = htmlTexture;
  

• ‫PixiJS: תמיכה מובנית בגרסה v8.19.0 עם HTMLSource.

  import { HTMLSource } from 'pixi.js/html-source';
  const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
  app.stage.addChild(sprite);
  

• ‫CanvasUI: ספריית רכיבים בקוד פתוח שתוכננה במיוחד ל-HTML-in-Canvas.

פרטים נוספים על ההטמעה זמינים במסמכי התיעוד של כל מסגרת.

זיהוי תכונות ואסטרטגיות חלופיות

כדי לוודא שהקוד תואם לדפדפנים שונים, צריך לבדוק את התמיכה ב-API לפני שמריצים את הקוד:

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

אם ה-API לא זמין, אפשר לחזור לממשקי משתמש חלופיים, שכבות-על צפות של HTML או אחת מהספריות הזמינות (לדוגמה, three-html-render,‏ html2canvas או dom-to-image).

השלבים הבאים

• למאמרי העזרה המלאים בנושא HTML-in-Canvas ב-Chrome למפתחים
• לשדרג את עוזרי התכנות באמצעות Modern Web Guidance.
• לשלוח משוב במאגר של WICG ב-GitHub.
• הדגמות של HTML ב-Canvas בקהילה