Этот дикий API открывает Интернет

Интернет часто кажется стерильным, ландшафтом предсказуемых шаблонов. Сайты, генерируемые ИИ, усугубляют эту однородность, создавая опыт, который ставит функцию выше удовольствия. Эта гомогенизация заставляет пользователей жаждать чего-то свежего, чего-то неожиданного, возвращения к более экспериментальным корням интернета.

Причудливость, некогда отличительная черта ранних веб-экспериментов, в значительной степени исчезла с основных сайтов. Тем не менее, как демонстрирует видео "HTML In Canvas Is Wild And I Love It" от Better Stack, творческие, игривые взаимодействия могут глубоко вовлечь пользователей. Представьте себе веб-сайт, где вы играете в пинбол, чтобы отписаться, или просматриваете Twitter с виртуального рабочего стола, как ярко показано в Demos Shown.

Представляем HTML in Canvas, новый эксперимент Chrome, призванный вернуть столь необходимую креативность в веб-разработку. Этот мощный API, в настоящее время являющийся Proposal, подробно описанный в Relevant Links, позволяет разработчикам отображать реальные, интерактивные HTML-элементы непосредственно в сценах WebGL и 2D Canvas. Это представляет собой фундаментальный сдвиг в том, как мы задумываем и конструируем цифровые интерфейсы, выходя за рамки статических презентаций.

Традиционный веб-дизайн, ограниченный блочной моделью и каскадными правилами CSS, часто с трудом достигает по-настоящему динамичных или физически симулированных макетов. Хотя CSS надежен, он обычно диктует жесткую структуру для контента. Canvas, напротив, предлагает безграничную среду на уровне пикселей, где разработчики обладают беспрецедентным контролем, освобождая контент от обычных сеточных систем и позволяя создавать поистине уникальные визуальные парадигмы.

Это освобождение позволяет создавать опыт, ранее считавшийся непрактичным или даже невозможным в рамках стандартного DOM. Разработчики, такие как Alyx, Dominik и Sawyer, уже продемонстрировали удивительные приложения, от интерактивных эффектов отслеживания взгляда до полностью интегрированных виртуальных сред, которые реагируют на ввод пользователя в реальном времени. Их ранние эксперименты намекают на будущее, где веб-страницы не просто читаются, а динамически переживаются, способствуя более глубокому вовлечению.

Преодолевая разрыв между богатыми возможностями HTML (доступность, интернационализация, сложный рендеринг текста) и графическим мастерством Canvas, этот эксперимент дает разработчикам возможность создавать опыт, который является как глубоко интерактивным, так и по своей сути увлекательным. Это лучшее из обоих миров, решающее сложные задачи макета, открывая двери для беспрецедентной настройки пользовательского интерфейса, разрушая шаблон однородного веб-дизайна.

Представьте себе рендеринг живых, интерактивных HTML-элементов непосредственно в сцене WebGL или 2D Canvas. Это основная предпосылка HTML in Canvas, инновационного предложения, которое превращает любой стандартный элемент DOM — со всеми его стилями CSS и функциональностью JavaScript — в динамическую текстуру для графики, ускоренной GPU. Это эффективно устраняет разрыв между структурированным контентом HTML и визуальной гибкостью Canvas.

Это не просто умозрительная концепция; HTML in Canvas — это официальное предложение, поддерживаемое Web Incubator Community Group (WICG). В настоящее время оно существует как экспериментальная функция в Chrome Canary, позволяя разработчикам активировать ее с помощью флага и начать изучать ее возможности. Видео "HTML In Canvas Is Wild And I Love It" от Better Stack подчеркивает недавний всплеск творческих демонстраций.

До этого предложения интеграция сложного контента HTML в среду Canvas была значительным препятствием. Разработчики часто прибегали к ручной повторной реализации рендеринга текста, механизмов компоновки и элементов управления пользовательского интерфейса в контекстах WebGL или 2D Canvas. Этот трудоемкий процесс часто ставил под угрозу доступность, интернационализацию и общую производительность, вынуждая идти на компромисс между богатой интерактивностью и графической мощью.

HTML in Canvas устраняет эти компромиссы, рассматривая элементы HTML как первоклассных участников графического конвейера. Важно отметить, что отрендеренный HTML остается полностью интерактивным, доступным и неотъемлемой частью DOM tree. Пользователи могут нажимать кнопки, заполнять формы или выделять текст в этих «встроенных» компонентах HTML, воспринимая их так же бесшовно, как любой стандартный элемент веб-страницы, а не просто статическое изображение.

Этот прорыв открывает беспрецедентные возможности для веб-дизайна, позволяя разработчикам накладывать сложные интерфейсы, динамические визуализации данных или даже целые мини-приложения непосредственно в иммерсивные 3D-сцены. Недавние демонстрации от таких новаторов, как Alyx, Dominik и Sawyer, демонстрируют немедленный потенциал, иллюстрируя, как легко разработчики теперь могут внедрять богатый, интерактивный веб-контент в визуально потрясающие, управляемые GPU-опыты.

Веб-опыты на основе Canvas часто сталкиваются со значительными препятствиями, особенно в областях, где превосходит нативный HTML. Этот новый API напрямую решает эти давние проблемы, начиная с доступности. Традиционно контент, отображаемый исключительно внутри элемента `<canvas>`, является черным ящиком для вспомогательных технологий, таких как программы чтения с экрана. Разработчикам приходилось кропотливо повторно реализовывать семантическое значение, если вообще это делалось.

HTML in Canvas решает эту проблему, рассматривая базовые элементы HTML как реальных участников компоновки, даже когда они невидимы. Применение атрибута `layout subtree` к элементу Canvas указывает браузеру включить его дочерние элементы HTML в дерево доступности и позволить им получать фокус. Это гарантирует, что богатый, интерактивный контент, отображаемый как текстура, остается семантически доступным и навигируемым для всех пользователей, что является монументальной победой для инклюзивного дизайна.

Интернационализация (i18n) представляет еще одну серьезную проблему для пользовательского рендеринга Canvas. Реализация правильного формирования текста, лигатур и особенно текста справа налево (RTL) для таких языков, как арабский или иврит, невероятно сложна. Разработчики часто тратят бесчисленные часы на создание или интеграцию сторонних текстовых движков. Браузер, однако, совершенствовал это на протяжении десятилетий.

Этот API напрямую использует зрелый текстовый движок браузера. Это означает, что разработчикам больше не нужно изобретать велосипед для поддержки глобальных языков, гарантируя, что весь текст отображается точно и красиво, независимо от скрипта или направления. Это значительно сокращает затраты на разработку и улучшает качество интернационализированных приложений Canvas.

Производительность и качество рендеринга также значительно улучшаются. Движки браузеров высоко оптимизированы, часто с ускорением GPU, для отображения контента HTML и CSS. Пользовательские библиотеки рендеринга текста в Canvas редко соответствуют этой нативной эффективности или визуальной точности. Передавая рендеринг текста и сложной компоновки браузеру, API высвобождает циклы GPU для более требовательных графических эффектов внутри самого Canvas.

Этот подход действительно предлагает лучшее из двух миров. Он предоставляет разработчикам неограниченную графическую мощь и творческую свободу Canvas, как это видно в инновационных демонстрациях от Alyx, Dominik и Sawyer, одновременно наследуя надежные, проверенные временем решения HTML для фундаментальных веб-задач. Чтобы углубиться в технические характеристики, обратитесь к официальному предложению WICG/html-in-canvas. Эта интеграция устраняет сложные компромиссы, с которыми ранее сталкивались между богатой интерактивностью и основными веб-стандартами.

Чтобы начать экспериментировать с HTML in Canvas, сначала активируйте экспериментальный флаг функции в Chrome Canary. Перейдите в браузере по адресу `chrome://flags` и найдите «HTML in Canvas» или «Experimental Web Platform features». Включите соответствующий флаг, затем перезапустите Chrome, чтобы применить изменения. Это разблокирует API для немедленного использования в вашей среде разработки.

При включенном флаге самая базовая реализация включает встраивание стандартного HTML-элемента непосредственно в ваш тег `<canvas>`. Представьте себе `<form>` или `<div>`, содержащий богатый контент; поместите его как дочерний элемент элемента `<canvas>` в вашем HTML-документе. Традиционно такие дочерние элементы служат запасным контентом для браузеров, не поддерживающих Canvas, но этот новый API меняет эту динамику.

Далее измените элемент `<canvas>`, добавив атрибут `layout-subtree`: `<canvas layout-subtree id="myCanvas">`. Этот важный атрибут сигнализирует браузеру, что его дочерние HTML-элементы не являются просто запасными. Вместо этого он обозначает их как активных участников макета, что означает, что они обрабатываются движком макета, включаются в дерево доступности и даже могут получать фокус. Важно отметить, что они остаются неотображенными на экране до тех пор, пока не будут явно отрисованы.

Чтобы визуально отобразить этот скрытый HTML-элемент на вашем Canvas, используйте новый метод `drawElementImage()`. Сначала получите ссылку на ваш HTML-элемент и контекст 2D-рендеринга:

```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const myForm = document.getElementById('myFormElement'); // Assuming a child form with id="myFormElement" ```

Затем вызовите `drawElementImage()`:

```javascript ctx.drawElementImage(myForm, 0, 0, 300, 200); ```

Этот метод принимает несколько параметров. Первый — `myForm`, HTML-элемент, который вы хотите отрисовать. Последующие параметры указывают целевой прямоугольник на Canvas: `0, 0` для координат X и Y верхнего левого угла и `300, 200` для желаемой ширины и высоты для масштабирования элемента. Браузер фактически делает «снимок экрана» отрисованного состояния элемента `myForm` и рисует его на Canvas в указанном месте.

Этот рендеринг динамичен. Если базовое HTML-содержимое `myForm` изменяется — например, обновляется текстовый ввод или меняется стиль CSS — Canvas автоматически перерисовывает элемент. Разработчики также могут вручную запросить перерисовку с помощью `canvas.requestElementRepaint()` для точного контроля над циклами обновления, аналогично `requestAnimationFrame`. Это надежное взаимодействие создает мощный мост между статическим DOM и динамическим миром графики Canvas.

Выходя за рамки простых 2D-интеграций Canvas, истинная мощь HTML в Canvas проявляется при его сочетании с библиотеками WebGL, такими как Three.js. Это поднимает интерактивные веб-опыты с плоских поверхностей до захватывающих 3D-сред, позволяя разработчикам проецировать целые живые HTML-элементы на поверхности трехмерных объектов. Это открывает новую увлекательную границу для дизайна пользовательских интерфейсов в виртуальных пространствах, что ранее требовало сложных пользовательских решений для рендеринга.

Представьте себе сложный, управляемый данными HTML-компонент — возможно, биржевой тикер, панель управления или окно чата — с полным CSS-стилем и JavaScript-интерактивностью, теперь служащий динамической текстурой на вращающемся кубе или изогнутом дисплее. Это не статический снимок экрана; базовое HTML-содержимое остается полностью интерактивным и обновляется в реальном времени, отражая изменения в данных или пользовательском вводе. Такая возможность фундаментально меняет наше представление об элементах пользовательского интерфейса в 3D-контексте, предлагая беспрецедентную гибкость.

Центральное место в этой продвинутой интеграции занимает функция `texElementImage2D`. Этот мощный вызов API напрямую устраняет разрыв между DOM и GPU, творя чудеса. Он тщательно принимает существующую текстуру Three.js, важную информацию для рендеринга, такую как цветовое пространство и другие специфичные для GPU параметры, а также сам целевой HTML-элемент. По сути, `texElementImage2D` инструктирует браузер захватить текущее визуальное состояние этого HTML-элемента и применить его в качестве живой, обновляемой текстуры к вашей 3D-геометрии в сцене WebGL.

Убедительная демонстрация, представленная в видеоролике «HTML In Canvas Is Wild And I Love It», показывает живое расписание London Underground, встроенное непосредственно в сцену Three.js. Это не просто изображение расписания; это фактический, функционирующий HTML-элемент, с обновляющимися часами и изменениями расписания поездов в реальном времени. Богатый данными контент, обычно ограниченный стандартной веб-страницей, становится неотъемлемой, динамической частью 3D-мира, реагируя на изменения базовых данных и взаимодействия с пользователем без необходимости ручного обновления текстур или сложного пользовательского рендеринга.

Эта бесшовная интеграция означает, что разработчики могут в полной мере использовать мощные возможности HTML и CSS для макета, типографики и важнейших функций доступности, одновременно задействуя высокую производительность и визуальную точность WebGL. Обновления HTML-элемента, такие как изменения контента или ввод пользователя, вызывают автоматическое перерисовывание текстуры, гарантируя, что 3D-представление всегда отражает последнее состояние базового DOM. Для тех, кто хочет углубиться в технические особенности и детали реализации, официальное Proposal на GitHub предлагает всесторонние сведения об этом новаторском API.

Появление HTML в Canvas в Chrome Canary вызвало творческий взрыв, мгновенно вдохновив волну вирусных демонстраций. Разработчики быстро начали расширять границы, демонстрируя огромный потенциал для совершенно новых веб-взаимодействий. Эта возможность выходит за рамки статических макетов, позволяя создавать динамичные, иммерсивные впечатления, ранее невозможные без перестройки сложных интерфейсов с нуля.

Ранние демонстрации подчеркнули универсальность API. Один особенно запоминающийся пример продемонстрировал темный паттерн «отписка-пинбол», требующий от пользователей сыграть в игру, чтобы отказаться от рассылки — игривая, хотя и подрывная, переинтерпретация обычного пользовательского интерфейса. Другая демонстрация показала виртуальный компьютер, просматривающий Twitter, погружая пользователей в симулированную рабочую среду с интерактивным веб-контентом. «Желейный слайдер» Alyx привлек внимание своим тактильным, физически управляемым вводом, в то время как Dominik и Sawyer также поделились убедительными ранними экспериментами, иллюстрирующими разнообразный спектр творческих применений.

Эта новаторская функция позволяет креативным кодерам и UI/UX дизайнерам изобретать совершенно новые парадигмы взаимодействия. Освободившись от жестких ограничений традиционных CSS и DOM манипуляций, они теперь могут интегрировать сложные HTML структуры непосредственно в динамические 2D и 3D сцены. Это способствует инновациям в пользовательском опыте, позволяя создавать глубоко интерактивные и визуально насыщенные веб-приложения, которые переопределяют вовлеченность пользователей.

Важно отметить, что это не просто визуальные трюки. В основе каждого изобретательного отображения лежат реальные, семантические и доступные элементы форм, гарантирующие, что новые взаимодействия остаются инклюзивными и функциональными. Этот подход «лучшее из двух миров» позволяет разработчикам использовать надежность HTML наряду с графической мощью Canvas. Для тех, кто интересуется текущей разработкой и статусом этой преобразующей функции, более подробная информация доступна по ссылке HTML-in-canvas - Chrome Platform Status.

Более глубокое изучение HTML в Canvas раскрывает сложную механику браузера, лежащую в основе этой инновации. Эта экспериментальная функция в Chrome принципиально меняет то, как браузер обрабатывает и интегрирует элементы DOM в графические контексты, выходя за рамки традиционных парадигм рендеринга. По сути, она создает надежный мост между документом и GPU.

Разработчики обозначают конкретные HTML элементы для такой обработки, используя атрибут `layout-subtree` на дочерних элементах `<canvas>`. При обнаружении Chrome инициирует отдельный проход компоновки и отрисовки исключительно для этих помеченных элементов. Этот изолированный рендеринг происходит вне экрана, предотвращая их появление в основном потоке документа, хотя они остаются частью дерева доступности и могут получать фокус.

Результат этого специализированного процесса рендеринга — полное визуальное представление HTML, включая сложный CSS, текст и интерактивные компоненты — сохраняется во внеэкранном буфере. Этот буфер затем служит прямым источником для текстуры `Canvas`. Браузер эффективно передает этот отрендеренный контент на GPU, где он становится пригодной для использования текстурой в сценах WebGL или 2D Canvas.

Автоматическая синхронизация является краеугольным камнем этого API. Браузер интеллектуально отслеживает дочерние HTML элементы `layout-subtree` на предмет любых изменений, которые обычно вызывают перерисовку в стандартном конвейере рендеринга. Когда происходит такое событие отрисовки — будь то из-за CSS анимаций, обновлений JavaScript или пользовательского ввода — текстура Canvas автоматически обновляется, гарантируя, что отрендеренный HTML остается идеально синхронизированным со своим источником.

Для сценариев, требующих точного контроля, API включает функцию в стиле `requestPaint`. Этот явный вызов позволяет разработчикам вручную запускать обновление HTML текстуры. Такой детальный контроль бесценен для оптимизации производительности в сложных интерактивных приложениях, позволяя выполнять обновления только тогда, когда этого требуют конкретные взаимодействия пользователя или логика приложения, что отражает контроль, предлагаемый `requestAnimationFrame` для визуальных анимаций.

Хотя творческий потенциал HTML в Canvas неоспорим, технология остается в экспериментальной фазе, и разработчикам приходится сталкиваться с ее текущими ограничениями. Как указано в официальном Предложении, этот передовой API представляет несколько проблем, с которыми столкнутся первые пользователи. Это не обязательно недостатки, а скорее ожидаемые шероховатости функции, которая все еще находится в активной разработке в Chrome Canary. Игнорирование этих недостатков было бы неискренним по отношению к реальному применению этого мощного инструмента.

Производительность является значительным препятствием, с которым немедленно сталкиваются первые пользователи. Ранние реализации HTML в Canvas описываются как «неустойчивые» (wonky), особенно при работе со сложным или быстро меняющимся HTML-контентом. Рендеринг живых элементов DOM в виде текстур в сцене Canvas требует значительных ресурсов GPU, что часто приводит к неоптимальной частоте кадров для сложных, динамичных пользовательских интерфейсов. Эти накладные расходы являются известной величиной, еще не оптимизированной для широкого развертывания с высокой точностью, что требует тщательного учета сложности элементов и частоты обновлений.

Несколько специфических ошибок также выявились во время раннего тестирования. Заметная проблема связана с основной функцией `drawElementImage`, которая часто рендерит кадр с задержкой. Это создает заметную визуальную рассинхронизацию между базовым HTML-элементом и его текстурированным представлением на Canvas, нарушая иллюзию взаимодействия в реальном времени и отзывчивости. Кроме того, попытка рендеринга элементов, содержащих нативные полосы прокрутки, может привести к неожиданным сбоям браузера — критической ошибке, которая затрагивает многие распространенные веб-компоненты и на данный момент требует обходных решений.

Эти проблемы подчеркивают явную цель экспериментальной фазы. Именно по этой причине такие функции, как HTML в Canvas, попадают в Canary, чтобы выявить эти ошибки и узкие места в производительности для более широкой аудитории разработчиков. Обратная связь от пионеров, таких как Alyx, Dominik и Sawyer, чьи инновационные Demos Shown привлекли внимание, напрямую влияет на процесс доработки, гарантируя, что этим проблемам будет уделено внимание. Этот совместный, итеративный подход является фундаментальным для создания надежных возможностей веб-платформы до того, как API продвинется к более широкому внедрению и окончательной стандартизации.

Возможность рендеринга живого HTML в текстуру `Canvas` вызывает серьезные проблемы конфиденциальности, которые разработчики и поставщики браузеров тщательно рассмотрели. Эта мощная функция, хотя и обеспечивает беспрецедентную творческую свободу, может непреднамеренно раскрыть конфиденциальную информацию пользователя или системного уровня вредоносным веб-сайтам. Без контроля она представляет собой новый вектор для фингерпринтинга браузера.

Фингерпринтинг браузера включает сбор уникальных характеристик браузера, устройства и программного обеспечения пользователя для создания постоянного, часто трудноуловимого идентификатора. Традиционно, фингерпринтинг Canvas рендерит характеристики браузера, такие как рендеринг шрифтов, GPU, ОС и особенности драйверов, в скрытый Canvas, а затем извлекает хеш изображения. HTML в Canvas может значительно усилить этот риск. Рендеринг реальных элементов DOM позволяет веб-сайтам захватывать детали системного уровня, которые обычно не раскрываются через стандартные API. Представьте себе сайт, который рендерит скрытый div, содержащий системные шрифты, цвета посещенных ссылок или даже части темы пользовательского интерфейса операционной системы, непосредственно в текстуру. Этот «скриншот» элемента DOM может стать новой, высокодетализированной точкой данных для отслеживания пользователей в Интернете.

Признавая эту критическую проблему, `Proposal` для HTML в Canvas предлагает надежное решение: рисование с сохранением конфиденциальности. Этот сложный механизм активно удаляет конфиденциальную информацию из рендерируемого вывода до того, как она достигнет текстуры `Canvas`. Браузер намеренно пропускает определенные элементы и стили, которые могли бы способствовать фингерпринтингу, гарантируя, что, хотя структура и содержимое рендерятся, уникальный системный «оттенок» удаляется. Такой подход предотвращает использование веб-сайтами конвейера рендеринга для скрытого сбора данных.

Предлагаемое решение специально исключает несколько категорий информации из отрисовки в текстуру `Canvas`, обеспечивая конфиденциальность пользователя. Эти критически важные исключения включают: - Цвета посещенных ссылок, которые могут раскрыть историю просмотров пользователя. - Системные темы и специфичные для платформы элементы пользовательского интерфейса, такие как полосы прокрутки или стандартные элементы управления форм, которые выдают детали операционной системы. - Маркеры орфографии и грамматики, которые различаются в зависимости от пользовательских настроек или конфигураций словарей. - Пользовательские шрифты, не загруженные явно страницей, предотвращая перечисление локальных установок шрифтов. - Кольца фокуса и другие индикаторы взаимодействия с пользователем, которые могут отличаться в зависимости от системы или настроек доступности. Эта тщательная очистка направлена на то, чтобы сбалансировать огромную творческую мощь API с твердой приверженностью конфиденциальности пользователя, предотвращая создание новых, мощных векторов для снятия отпечатков. Для получения более глубоких технических сведений об этих мерах защиты конфиденциальности обратитесь к документации HTML-in-Canvas.

Эксперимент HTML in Canvas представляет собой значительный шаг к более динамичному и выразительному вебу. В настоящее время это экспериментальная функция в Chrome Canary, и ее путь к становлению полноценным веб-стандартом зависит от активного участия сообщества и обширного тестирования. Web Incubator Community Group (WICG) активно курирует это предложение, приглашая разработчиков расширять его границы и предоставлять бесценные отзывы. Этот совместный процесс имеет решающее значение для доработки API, решения потенциальных проблем, таких как те, что связаны с производительностью и конфиденциальностью, а также для обеспечения его долгосрочной жизнеспособности и кроссбраузерной совместимости.

Разработчикам, желающим отслеживать эволюцию этого новаторского API, следует следить за официальным предложением WICG на GitHub. Этот репозиторий служит центральным узлом для обсуждений, обновлений спецификаций и хода реализации, предлагая прямой канал для обратной связи. Кроме того, страница Chrome Platform Status предоставляет информацию в реальном времени о жизненном цикле его разработки в Chrome, включая любые изменения флагов функций или экспериментальных стадий. Активное участие сообщества разработчиков, будь то через отчеты об ошибках или создание инновационных демонстраций, напрямую влияет на траекторию предложения к широкому распространению в экосистеме.

Представьте себе веб, где интерактивные пользовательские интерфейсы игр бесшовно интегрируются в 3D-среды, или иммерсивные электронные коммерции позволяют пользователям настраивать продукты с помощью живых, доступных спецификаций HTML непосредственно в виртуальном выставочном зале. Визуализации данных могли бы выйти за пределы плоских экранов, становясь интерактивными элементами в полностью исследуемом 3D-пространстве, предлагая беспрецедентную ясность и вовлеченность. Этот API обещает преодолеть разрыв между богатым графическим опытом и надежными, доступными возможностями стандартных HTML, CSS и JavaScript. От вирусных демонстраций Alyx и Dominik до творческих исследований Sawyer, ранние эксперименты лишь намекают на глубокие преобразования, ожидающие веб-опыта, как только HTML in Canvas созреет в фундаментальную веб-технологию, открывая новую эру цифрового творчества.

Что такое HTML in Canvas?

HTML in Canvas — это экспериментальная функция браузера, в настоящее время доступная в Chrome Canary, которая позволяет разработчикам отображать полностью интерактивный контент HTML и CSS непосредственно внутри 2D или WebGL canvas.

Как начать использовать HTML in Canvas?

Вам нужно использовать браузер, который поддерживает эту функцию, например Chrome Canary, и включить флаг 'Experimental Web Platform features'. Затем вы сможете использовать атрибут `layout-subtree` и новые функции рисования, такие как `drawElementImage`.

Готов ли HTML in Canvas для продакшн-сайтов?

Нет. В настоящее время это экспериментальное предложение с известными проблемами производительности, ошибками и потенциальными изменениями API. Не рекомендуется для использования в продакшене, пока оно не станет стабильным веб-стандартом.

Каковы основные преимущества использования HTML в Canvas?

Это решает основные проблемы в приложениях на основе canvas за счет использования нативной HTML-визуализации браузера. Это значительно улучшает доступность, качество текста, интернационализацию и упрощает создание сложных пользовательских интерфейсов в графических сценах.