Записки фронтендера
HTML в Canvas
В Chrome 148 версии добавили возможность рисовать Canvas при помощи обыкновенного HTML.
Для того, чтобы это работало, необходимо <canvas> элементу передать специальный атрибут layoutsubtree и положить внутрь него любой HTML код.
Для перерисовки всех состояний элемента, скажем :hover эффекта или выделения текста, используются следующие методы:
1) 2D API — ctx.drawElementImage(element)
2) WebGL — gl.texElementImage2D(element)
3) WebGPU — copyElementImageToTexture(...)
Для того, чтобы элемент всегда совпадал с фактическим расположением отрисованной картинки (на видео показал разницу), его сдвигают при помощи transform, полученным из одного из перечисленных выше методов.
Всё это оборачивается в обработчик paint, который реагирует на изменения внутренних DOM элементов и вызывает переданный колбек.
<canvas id="canvas" layoutsubtree>
<input id="input-element" type="text">
</canvas>
const ctx = document.getElementById('canvas').getContext('2d');
const inputElement = document.getElementById('input-element');
const canvas = document.getElementById('canvas');
canvas.addEventListener('paint', () => {
ctx.reset();
const transform = ctx.drawElementImage(inputElement, 50, 50);
inputElement.style.transform = transform.toString();
});
Также при помощи метода canvas.requestPaint(), мы можем при надобности принудительно вызвать событие paint.
⚙️ Таблицу на caniuse ещё не завезли
3 · 451 ·