CSS Paint API: Worklets

De CSS Paint API is een functie van CSS Houdini waarmee je JavaScript-workletfuncties kunt schrijven om achtergronden, randen en maskers programmatisch te genereren — waarmee je in feite uitbreidt wat CSS background-image kan weergeven.

Een Paint Worklet is een JavaScript-bestand dat in een afzonderlijk bereik van een worklet wordt uitgevoerd (niet in de hoofdthread). Het registreert een aangepaste CSS-tekenfunctie die als CSS-waarde kan worden gebruikt.

Een workletklasse implementeert de methode paint():

Laad de worklet vanuit je hoofd-JavaScript:

Verwijs naar de naam van de geregistreerde tekenfunctie in elke eigenschap die een afbeelding accepteert:

Tekenfuncties kunnen CSS-aangepaste eigenschappen lezen door ze als invoereigenschappen te declareren:

De parameter ctx is een PaintRenderingContext2D — een beperkte versie van de Canvas 2D-context. Je gebruikt bekende methoden: fillRect, arc, bezierCurveTo, enz.

De CSS Paint API maakt het volgende mogelijk:

• Complexe geometrische achtergronden zonder SVG
• Achtergronden met variabele gegevens (voortgangsbalken, activiteitsgrafieken)
• Rimpeleffecten op knoppen, aangestuurd door aangepaste eigenschappen
• Complexe randeffecten (gestreept, gearceerd)
• Golvende scheidingslijnen en organische vormen

Paint worklets worden buiten de hoofdthread uitgevoerd (in een afzonderlijke workletcontext) en tekenen alleen opnieuw wanneer hun aangepaste CSS-eigenschappen veranderen. Dit is efficiënter dan tekenen met Canvas, dat op de hoofdthread wordt uitgevoerd.

De CSS Paint API wordt ondersteund in Chrome 65+ en Edge 79+. Firefox en Safari ondersteunen deze API sinds 2024 niet. Gebruik de API als geleidelijke verbetering.

Geef altijd een terugvaloptie en gebruik @supports om de Paint Worklet alleen toe te passen wanneer deze wordt ondersteund:

Met de CSS Paint API kunnen JavaScript-worklets programmatisch CSS-afbeeldingen genereren. Schrijf een klasse met een paint()-methode, registreer deze met registerPaint(), laad deze met CSS.paintWorklet.addModule() en gebruik deze als background: paint(name). Painters kunnen aangepaste CSS-eigenschappen uitlezen om visuele elementen op basis van gegevens te maken. Geef terugvalopties met @supports.