PaintWorkletGlobalScope

Privacy concerns

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:

• The CSS Painting API Privacy Considerations section
• The CSS Painting API spec issue "CSS Paint API leaks browsing history"

Instance properties

This interface inherits properties from WorkletGlobalScope.

PaintWorkletGlobalScope.devicePixelRatio Read only Experimental

Returns the current device's ratio of physical pixels to logical pixels.

Instance methods

This interface inherits methods from WorkletGlobalScope.

PaintWorkletGlobalScope.registerPaint() Experimental

Registers a class to programmatically generate an image where a CSS property expects a file.

Examples

The following three examples go together to show creating, loading, and using a paint Worklet.

Create 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);

Load a paint worklet

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");
}

Use a paint worklet

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);
  }
}

Specifications

Browser compatibility

See also

• Using the CSS Painting API
• CSS Painting API
• Houdini APIs