Guides›Text behind glass

Text behind glass

Glass can bend text and any other HTML behind it. Point it at the element, and it takes a picture of that element and keeps it up to date.

How to use it

<div id="page">
  <h1>Text behind the glass</h1>
</div>

<edinstvo-glass source="#page"></edinstvo-glass>

How it works

A page can't read its own pixels, see How glass works. So glass copies the element with its styles and fonts into an SVG, draws that to a canvas and uses it as the backdrop. When the element changes, it takes a new picture.

What to know

A picture takes time, so use this for content that changes now and then, not for every frame. Fonts and images from other domains need CORS. This works in Chrome, Safari 27 and Firefox. If a browser refuses the picture, the element falls back to CSS.

Draw on a canvas

A canvas is the fastest and most reliable source. It suits text that moves or animates.

await document.fonts.load("700 120px Inter");

const context = canvas.getContext("2d");
context.font = "700 120px Inter";
context.fillStyle = "#e54d33";
context.fillText("glass", 40, 160);

glass.invalidate();