Limited availability
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The PaintWorkletGlobalScope interface of the CSS Painting API represents the global object available inside a paint Worklet.
To avoid leaking visited links, this feature is currently disabled in Chrome-based browsers for <a> elements with an href attribute, and for children of such elements. For details, see the following:
This interface inherits properties from WorkletGlobalScope.
PaintWorkletGlobalScope.devicePixelRatio Read only Experimental
Returns the current device's ratio of physical pixels to logical pixels.
This interface inherits methods from WorkletGlobalScope.
PaintWorkletGlobalScope.registerPaint() Experimental
Registers a class to programmatically generate an image where a CSS property expects a file.
The following three examples go together to show creating, loading, and using a paint Worklet.
The following shows an example worklet module. This should be in a separate js file. Note that registerPaint() is called without a reference to a paint Worklet.
class CheckerboardPainter {
paint(ctx, geom, properties) {
// The global object here is a PaintWorkletGlobalScope
// Methods and properties can be accessed directly
// as global features or prefixed using self
const dpr = self.devicePixelRatio;
// Use `ctx` as if it was a normal canvas
const colors = ["red", "green", "blue"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
// Register our class under a specific name
registerPaint("checkerboard", CheckerboardPainter);
The following example demonstrates loading the above worklet from its js file and does so by feature detection.
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule("checkerboard.js");
}
This example shows how to use a paint Worklet in a stylesheet, including the simplest way to provide a fallback if CSS.paintWorklet isn't supported.
textarea {
background-image: url("checkerboard.png"); /* Fallback */
background-image: paint(checkerboard);
}
You can also use the @supports at-rule.
@supports (background: paint(id)) {
textarea {
background-image: paint(checkerboard);
}
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4