00:00:00Ich glaube, das Internet braucht dringend etwas mehr Laune, besonders jetzt, wo KI
00:00:03so gut darin ist, Webseiten im Alleingang zu erstellen.
00:00:05Was wäre also, wenn es einfacher wäre, das Web spaßiger zu gestalten? So wie hier. Keine Sorge, ich
00:00:09halte dich nicht auf oder so, habe nur ein bisschen Spaß auf dieser Webseite. Du kannst jetzt sehen,
00:00:13dass da unten eine Menge meiner Augen sind. Und übrigens, wenn ich den Abonnieren-Button
00:00:17drücken kann, dann kannst du das auch.
00:00:18Stattdessen möchtest du vielleicht eine funktionalere, aber schöne Interaktion für deine Seite,
00:00:22oder du möchtest neue Dark Patterns erfinden, wie den Nutzer Flipper spielen zu lassen, um sich abzumelden. Oder
00:00:27vielleicht willst du dich nach einem langen Arbeitstag mit einem Bier an deinen Computer setzen,
00:00:30dich mit einem Bier an deinen virtuellen Computer setzen und Twitter oder so durchstöbern. All das ist
00:00:34möglich dank etwas namens HTML in Canvas. Lass uns darüber sprechen.
00:00:43Ich habe erst vor Kurzem dank Matt Rothenberg auf Twitter davon erfahren. Und nachdem ich
00:00:46diesen Beitrag gesehen habe, schien es eine Woche auf Twitter einzuläuten, in der es nur so von coolen
00:00:50Demos wimmelte. Ich habe gesehen, dass Wes Boss das ausprobiert hat und jede Menge
00:00:54Spaß dabei hatte. Dann habe ich auch noch dieses von AA gesehen, bei dem es um Fingerpistolen ging. Und beide unsere Demos
00:00:58haben tatsächlich das YouTube-Beispiel inspiriert, das ich im Intro hatte. Ich werde also alle Quellen
00:01:02für die gezeigten Demos in der Videobeschreibung verlinken, falls du mehr sehen möchtest.
00:01:05Was ist nun aber HTML in Canvas? Nun, kurz gesagt, es lässt dich echte interaktive
00:01:10DOM-Elemente direkt in deine WebGL- oder 2D-Canvases einbetten. Und im Moment ist es nur ein Vorschlag.
00:01:15Es wurde tatsächlich als Experiment zu Chrome Canary hinzugefügt, weshalb all diese Demos
00:01:19kürzlich aufgeploppt sind, und du kannst es jetzt in Chrome Canary ausprobieren, indem du dieses Flag aktivierst.
00:01:24Deine nächste Frage könnte allerdings sein: Warum? Nun, weil Canvas einige großartige
00:01:28Benutzeroberflächen und Anpassungen ermöglichen kann, wie wir bereits gesehen haben. Dinge, die in CSS schwerer, wenn nicht sogar unmöglich
00:01:32umzusetzen sind. Aber was Canvas nicht kann, ist, komplexe Layouts von Text und HTML-Inhalten einfach zu rendern.
00:01:38Man muss sie meistens intern von Grund auf neu aufbauen. Und das hat bedeutet, dass Canvas-
00:01:42basierte Inhalte unter Problemen wie Barrierefreiheit, Internationalisierung, Performance und Qualität leiden können.
00:01:47Und das sind Dinge, die HTML weitgehend gelöst hat. HTML in Canvas bietet also das Beste aus beiden
00:01:51Welten.
00:01:52Um dir zu zeigen, wie das funktioniert, führe ich dich durch eine Demo, wie man es tatsächlich benutzt. Und was
00:01:56ich hier habe, ist eine Fahrplan-Seite für die Londoner U-Bahn, die ich vor Jahren erstellt habe, bevor KI
00:02:00das wahrscheinlich im Alleingang hätte erstellen können. Und ich dachte immer, es wäre cool, wenn wir diese Infos
00:02:02innerhalb einer Three.js-Szene hätten. Nun ja, technisch gesehen kann man das mit Three.js machen, Three.js unterstützt offensichtlich
00:02:08Text, aber es wird viel einfacher sein, wenn ich einfach HTML in Canvas verwenden und das Element
00:02:12nehmen kann, das den Fahrplan nutzt, und es direkt in meine Szene einfügen kann. Anstatt dieses Bildes
00:02:16von Thomas, der kleinen Lokomotive, möchte ich einfach mein HTML sehen. Um das zu tun, ist der erste Schritt,
00:02:20das HTML, das wir tatsächlich in der Szene rendern wollen, zu nehmen und es in das
00:02:24Canvas zu packen. Das ist also das HTML, das tatsächlich diese Tafel aufgebaut hat, die wir
00:02:28gerade gesehen haben. Und wir setzen es als untergeordnetes Element des Canvas selbst ein. Im Moment
00:02:32dient dieses Element tatsächlich als Canvas-Fallback. Wenn das Canvas also aus irgendeinem Grund nicht im Browser des Benutzers
00:02:36lädt, werden sie tatsächlich dieses Element sehen. Und das ist nicht das, was
00:02:39wir wollen. Um das zu beheben, können wir bei HTML in Canvas unserem Canvas-Element
00:02:44ein Attribut namens layout subtree geben. Das weist den Browser an, alle untergeordneten Canvas-Elemente
00:02:48als echte Layout-Teilnehmer zu behandeln. Sie werden also in den Barrierefreiheitsbaum aufgenommen, können den Fokus
00:02:52empfangen, werden aber dennoch nicht auf dem Bildschirm gemalt. Wir können das in meiner Demo hier sehen,
00:02:56wo immer noch nichts angezeigt wird. Das Element wird hier nirgendwo angezeigt,
00:03:00aber wir haben es im Inspektor und wenn wir mit der Maus darüber fahren, zeigt es, dass es technisch
00:03:04gerendert wird. Es ist nur unsichtbar. Um tatsächlich auf dem Canvas zu rendern, müssen wir es
00:03:08in eine Textur umwandeln, die wir dann anstelle des Bildes von Thomas, der kleinen Lokomotive, verwenden können. Und
00:03:12genau das mache ich mit dieser Funktion hier. Nun, das meiste davon ist tatsächlich Three.
00:03:15js, also brauchst du dir darüber keine Sorgen zu machen. Das erste ist einfach, die Textur zu bekommen,
00:03:19was eine GL-Textur ist, und das ist momentan das Bild von Thomas, der kleinen Lokomotive. Aber dann
00:03:22tun wir in dieser Zeile etwas, das eine HTML-in-Canvas-Funktion namens text element image 2d verwendet.
00:03:27Es sieht ziemlich komplex aus, aber wir nehmen einfach die Three.js-Textur, auf die wir
00:03:30das Element anwenden wollen. Wir geben einige Informationen darüber an, wie es gerendert wird, wie
00:03:34Farbraum und andere Dinge für die GPU, aber darüber müssen wir uns nicht allzu viele Gedanken machen.
00:03:38Und dann stellen wir auch noch das HTML-Element zur Verfügung, das wir rendern wollen. In diesem Fall
00:03:42ist es 'board'. Und das stammt einfach aus dieser Zeile hier, wo wir 'document dot
00:03:45get element by ID' verwenden, um das Element zu erhalten, das wir in das Canvas gesetzt haben. Damit
00:03:49zurück in unserer Demo kannst du sehen, dass wir jetzt tatsächlich den Fahrplan anstelle des Bildes haben und er
00:03:53aktualisiert sich live. Die Uhr aktualisiert sich und ich habe gesehen, dass sich auch die Zeiten aktualisiert haben. Das ist also jetzt
00:03:57unter Verwendung unseres HTML-Elements, aber es wird als Textur auf diesem Canvas bereitgestellt. Jetzt gehen wir
00:04:02zum Untersuchen-Element. Man kann tatsächlich sehen, wenn wir mit der Maus über das Element fahren, dass diese Tafel
00:04:06immer noch auf unsichtbare Weise gerendert wird. Und das liegt daran, dass man sich das
00:04:09im Grunde nur so vorstellen kann, als würde man schauen, was dieses Element wäre, einen Screenshot davon machen und dann
00:04:14es an die Stelle der Textur setzen. Es aktualisiert sich also jedes Mal, wenn eines dieser Elemente neu gerendert wird.
00:04:19Dies geschieht tatsächlich mit einem Paint-Event in HTML-Canvas, das die Aktualisierungen auslöst, wenn
00:04:22es erkennt, dass eines der untergeordneten Canvas-Elemente neu gerendert wurde, aber man kann
00:04:26auch eine Neuzeichnung anfordern, ähnlich wie mit 'request animation frame'.
00:04:30Wenn du immer noch etwas verwirrt bist, empfehle ich dir sehr, dir diesen Vorschlag auf GitHub anzusehen.
00:04:34Er enthält jede Menge Informationen und Demos. Und um ehrlich zu sein, ich bin ein bisschen
00:04:38komplexeren Weg gegangen, indem ich Three.js und WebGL gewählt habe. Aber wenn du das
00:04:42einfachste Beispiel sehen willst, musst du nur in einem Canvas etwas wie ein Formularelement
00:04:46hier einfügen. Und wenn du das auf dem Canvas rendern willst, können wir einfach sagen: 'context dot draw
00:04:49element image', dann ein Formularelement und auch, wo wir das haben wollen. Das
00:04:54ist also die einfachste Form von HTML in Canvas. Ich möchte dir auch noch sehr schnell
00:04:58diese Demo zeigen. Ich finde, sie macht riesigen Spaß. Du kannst sehen, sie nutzt WebGPU und die 'copy element image'
00:05:02Funktion von HTML in Canvas, um ein Div unter einem Jelly-Slider zu zeichnen. Und es macht einfach total Spaß.
00:05:07Aber das wirklich Coole daran ist, dass im Hintergrund tatsächlich immer noch eine Eingabe verwendet wird.
00:05:11Es ist nur eine sehr coole benutzerdefinierte Eingabe. Das ist die Art von Dingen, die HTML in Canvas ermöglichen kann.
00:05:16Es gibt jedoch einige Nachteile, die der Vorschlag zu beheben versucht. Einer der wichtigsten
00:05:19ist natürlich die Performance. Es ist im Moment noch ein bisschen holprig. Es gibt auch ein paar
00:05:24Fehler, wie dass 'draw element image' einen Frame hinter dem DOM-Status liegt. Das ist ein wenig
00:05:28visuelle Desynchronisation. Und anscheinend, wenn man versucht, eine Bildlaufleiste in die Canvas-
00:05:32Kinder zu setzen, stürzt es einfach direkt ab. Aber deshalb ist es vorerst auch ein Experiment.
00:05:36Genau das ist es, wonach sie suchen. Es gab auch einige Datenschutzbedenken, dass, wenn
00:05:40dies ein HTML-Element rendern kann, man nicht möchte, dass es mehr Informationen preisgibt, als man
00:05:44normalerweise durch JavaScript erhalten könnte. Also haben sie privatsphäre-schonendes Malen
00:05:48als Risiko, unter Ausschluss sensibler Informationen wie Systemfarben, Themen, Einstellungen, Rechtschreib- und
00:05:52Grammatikmarkierungen, Informationen über besuchte Links und so weiter. Und ich denke, die Hauptsorge hierbei ist,
00:05:56dass sie keinen weiteren Punkt zur Datenerfassung für Fingerprinting hinzufügen wollen. So oder so,
00:06:00ich mag, was ich bisher gesehen habe. Ich würde mich also freuen, wenn dies mehr als nur ein Experiment sein könnte,
00:06:04aber ich bin super gespannt, was du denkst. Lass es mich unten in den Kommentaren wissen, warum sie
00:06:07abonnieren, und wie immer: Wir sehen uns beim nächsten Mal.