Signatur
Beschreibung
PaintSize.height gehört zur CSS Painting API (CSS Houdini). Ein PaintSize-Objekt wird als zweites Argument an die Methode paint(ctx, size, properties) einer mit registerPaint() registrierten Klasse übergeben. Über size.height erfährt das Worklet, wie hoch die Fläche ist, auf die es zeichnen soll – also die Höhe des Elementbereichs, für den die CSS-Funktion paint() verwendet wird (z. B. als background-image oder border-image).
Der Wert wird in CSS-Pixeln angegeben, nicht in Gerätepixeln. Der übergebene PaintRenderingContext2D ist bereits passend zur Pixeldichte skaliert, sodass man direkt mit size.width und size.height rechnen kann, ohne devicePixelRatio berücksichtigen zu müssen.
Typische Anwendungen sind responsive, generierte Hintergründe: Streifen, Verläufe, Rahmen, Sprechblasen oder Platzhalter-Muster, die sich automatisch an die Elementgröße anpassen. Ändert sich die Größe des Elements, ruft der Browser paint() erneut mit einem aktualisierten PaintSize-Objekt auf.
Rückgabewert
Beispiele
Worklet: horizontale Streifen passend zur Elementhöhe
// stripes-worklet.js – läuft im PaintWorkletGlobalScope
class StripesPainter {
paint(ctx, size) {
const stripeCount = 8;
// Streifenhöhe dynamisch aus size.height berechnen
const stripeHeight = size.height / stripeCount;
for (let i = 0; i < stripeCount; i++) {
ctx.fillStyle = i % 2 === 0 ? '#1e88e5' : '#bbdefb';
ctx.fillRect(0, i * stripeHeight, size.width, stripeHeight);
}
}
}
registerPaint('stripes', StripesPainter);Worklet laden und per CSS verwenden
// main.js – im Hauptdokument
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('stripes-worklet.js');
} else {
console.warn('CSS Painting API wird nicht unterstützt');
}
/* style.css
.box {
width: 300px;
height: 200px;
background-color: #bbdefb; // Fallback
background-image: paint(stripes);
}
*/Vertikaler Verlauf und Mittellinie über size.height
// divider-worklet.js
class DividerPainter {
static get inputProperties() {
return ['--divider-color'];
}
paint(ctx, size, props) {
const { width, height } = size;
const color = props.get('--divider-color').toString().trim() || 'tomato';
// Verlauf über die gesamte Höhe
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, '#fafafa');
gradient.addColorStop(1, '#e0e0e0');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
// Linie exakt in der vertikalen Mitte
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
}
}
registerPaint('divider', DividerPainter);// Wichtig · Fallstricke
- Browser-Kompatibilität: Die CSS Painting API wird nur von Chromium-basierten Browsern (Chrome, Edge, Opera) unterstützt. Firefox und Safari unterstützen sie derzeit nicht – immer einen CSS-Fallback (z. B.
background-color) angeben und per'paintWorklet' in CSSprüfen. PaintSizeexistiert ausschließlich imPaintWorkletGlobalScope; im Hauptskript lässt sich kein solches Objekt erzeugen oder abfragen.- Die Eigenschaft ist schreibgeschützt; Zuweisungen haben keine Wirkung. Die Größe der Zeichenfläche wird allein durch das Layout bestimmt.
- Der Wert ist in CSS-Pixeln angegeben und kann Nachkommastellen haben – für pixelgenaue Linien ggf. mit
Math.round()arbeiten. - Worklets erfordern einen sicheren Kontext (HTTPS oder
localhost). paint()kann bei jeder Größenänderung häufig aufgerufen werden – aufwendige Berechnungen vermeiden, da der Browser Instanzen jederzeit neu erzeugen darf und kein Zustand zwischen Aufrufen garantiert ist.