When the registerPaint(|name|, |paintCtor|) method is called, the user agent must run the following steps: 1. If the |name| is an empty string, [=throw=] a [=TypeError=] and abort all these steps. 2. Let |paintDefinitionMap| be {{PaintWorkletGlobalScope}}'s [=paint definitions=] map. 3. If |paintDefinitionMap|[|name|] [=map/exists=] [=throw=] a "{{InvalidModificationError}}" {{DOMException}} and abort all these steps. 4. Let |inputProperties| be an empty sequence<DOMString>. 5. Let |inputPropertiesIterable| be the result of [=Get=](|paintCtor|, "inputProperties"). 6. If |inputPropertiesIterable| is not undefined, then set |inputProperties| to the result of [=converting=] |inputPropertiesIterable| to a sequence<DOMString>. If an exception is [=thrown=], rethrow the exception and abort all these steps. 7. Filter |inputProperties| so that it only contains [=supported CSS properties=] and [=custom properties=]. Note: The list of CSS properties provided by the input properties getter can either be custom or native CSS properties. Note: The list of CSS properties may contain shorthands. Note: In order for a paint image class to be forwards compatible, the list of CSS properties can also contains currently invalid properties for the user agent. For example margin-bikeshed-property. 8. Let |inputArguments| be an empty sequence<DOMString>. 9. Let |inputArgumentsIterable| be the result of [=Get=](|paintCtor|, "inputArguments"). 10. If |inputArgumentsIterable| is not undefined, then set |inputArguments| to the result of [=converting=] |inputArgumentsIterable| to a sequence<DOMString>. If an exception is thrown, rethrow the exception and abort all these steps. 11. Let |inputArgumentSyntaxes| be an [=list/empty=] [=list=]. 12. [=list/For each=] |item| in |inputArguments| perform the following substeps: 1. Attempt to [=consume a syntax definition=] from |item|. If failure was returned, [=throw=] a [=TypeError=] and abort all these steps. Otherwise, let |parsedSyntax| be the returned [=syntax definition=]. 2. [=list/Append=] |parsedSyntax| to |inputArgumentSyntaxes|. 13. Let |contextOptionsValue| be the result of [=Get=](|paintCtor|, "contextOptions"). 14. Let |paintRenderingContext2DSettings| be the result of [=converting=] |contextOptionsValue| to a {{PaintRenderingContext2DSettings}}. If an exception is [=thrown=], rethrow the exception and abort all these steps. Note: Setting paintRenderingContext2DSettings.alpha is false allows user agents to anti-alias text in addition to performing "visibility" optimizations, e.g. not painting an image behind the paint image as the paint image is opaque. 15. If the result of [=IsConstructor=](|paintCtor|) is false, [=throw=] a [=TypeError=] and abort all these steps. 16. Let |prototype| be the result of [=Get=](|paintCtor|, "prototype"). 17. If the result of [=Type=](|prototype|) is not Object, [=throw=] a [=TypeError=] and abort all these steps. 18. Let |paintValue| be the result of [=Get=](|prototype|, "paint"). 19. Let |paint| be the result of [=converting=] |paintValue| to the [=Function=] [=callback function=] type. Rethrow any exceptions from the conversion. 20. Let |definition| be a new [=paint definition=] with: - [=paint definition/class constructor=] being |paintCtor|. - [=paint function=] being |paint|. - [=paint definition/constructor valid flag=] being true. - [=paint definition/input properties=] being |inputProperties|. - [=paint definition/PaintRenderingContext2DSettings object=] being |paintRenderingContext2DSettings|. 21. [=map/Set=] |paintDefinitionMap|[|name|] to |definition|. 22. [=Queue a task=] to run the following steps: 1. Let |documentPaintDefinitionMap| be the associated [=document's=] [=document paint definitions=] [=map=]. 2. Let |documentDefinition| be a new [=document paint definition=] with: - [=document paint definition/input properties=] being |inputProperties|. - [=document paint definition/input argument syntaxes=] being |inputArgumentSyntaxes|. - [=document paint definition/PaintRenderingContext2DSettings object=] being |paintRenderingContext2DSettings|. 3. If |documentPaintDefinitionMap|[|name|] [=map/exists=], run the following steps: 1. Let |existingDocumentDefinition| be the result of [=map/get=] |documentPaintDefinitionMap|[|name|]. 2. If |existingDocumentDefinition| is "invalid", abort all these steps. 3. If |existingDocumentDefinition| and |documentDefinition| are not equivalent, (that is [=document paint definition/input properties=], input argument syntaxes, and PaintRenderingContext2DSettings object are different), then: [=map/Set=] |documentPaintDefinitionMap|[|name|] to "invalid". Log an error to the debugging console stating that the same class was registered with different inputProperties, inputArguments, or paintRenderingContext2DSettings. 4. Otherwise, [=map/set=] |documentPaintDefinitionMap|[|name|] to |documentDefinition|. Note: The list of input properties should only be looked up once, the class doesn't have the opportunity to dynamically change its input properties. Note: In a future version of the spec, the author could have the ability to receive a different type of RenderingContext. In particular the author may want a WebGL rendering context to render 3D effects. There are complexities in setting up a WebGL rendering context to take the {{PaintSize}} and {{StylePropertyMap}} as inputs.

    paint() = paint( <>, <>? )

        <style>
            .logo { background-image: paint(company-logo); }
            .chat-bubble { background-image: paint(chat-bubble, blue); }
        </style>
    

[Exposed=PaintWorklet]
interface PaintRenderingContext2D {
};
PaintRenderingContext2D includes CanvasState;
PaintRenderingContext2D includes CanvasTransform;
PaintRenderingContext2D includes CanvasCompositing;
PaintRenderingContext2D includes CanvasImageSmoothing;
PaintRenderingContext2D includes CanvasFillStrokeStyles;
PaintRenderingContext2D includes CanvasShadowStyles;
PaintRenderingContext2D includes CanvasRect;
PaintRenderingContext2D includes CanvasDrawPath;
PaintRenderingContext2D includes CanvasDrawImage;
PaintRenderingContext2D includes CanvasPathDrawingStyles;
PaintRenderingContext2D includes CanvasPath;

        registerPaint('currentcolor', class {
            paint(ctx, size) {
                ctx.fillStyle = 'currentColor';
                ctx.fillRect(0, 0, size.width, size.height);
            }
        });
    

        requestAnimationFrame(function() {
            element.styleMap.set('--custom-prop-invalidates-paint', 42);
        });
    

[Exposed=PaintWorklet]
interface PaintSize {
    readonly attribute double width;
    readonly attribute double height;
};

                // paint.js
                registerPaint('failing-argument-syntax', class {
                    static get inputArguments() { return ['<length>']; }
                    paint(ctx, size, styleMap, args) { /* paint code here. */ }
                });
            

                <style>
                    .example-1 {
                        background-image: paint(failing-argument-syntax, red);
                    }
                    .example-2 {
                        background-image: paint(failing-argument-syntax, 1px, 2px);
                    }
                </style>
                <div class=example-1></div>
                <div class=example-2></div>
                <script>
                    CSS.paintWorklet.addModule('paint.js');
                </script>
            

                // paint.js
                registerPaint('simple', class {
                    paint(ctx, size) {
                        ctx.fillStyle = 'green';
                        ctx.fillRect(0, 0, size.width, size.height);
                    }
                });
            

                <style>
                    .div-1 {
                        width: 50px;
                        height: 50px;
                        background-image: paint(simple);
                    }
                    .div-2 {
                        width: 100px;
                        height: 100px;

                        background-size: 50% 50%;
                        background-image: paint(simple);
                    }
                </style>
                <div class=div-1></div>
                <div class=div-2></div>
                <script>
                    CSS.paintWorklet.addModule('paint.js');
                </script>
            

<!DOCTYPE html>
<style>
  #example {
    --circle-color: deepskyblue;

    background-image: paint(circle);
    font-family: sans-serif;
    font-size: 36px;
    transition: --circle-color 1s;
  }

  #example:focus {
    --circle-color: purple;
  }
</style>

<textarea id="example">
  CSS is awesome.
</textarea>

<script>
    CSS.registerProperty({
      name: '--circle-color',
      syntax: '<color>',
      initialValue: 'black',
      inherits: false
    });
    CSS.paintWorklet.addModule('circle.js');
</script>

// circle.js
registerPaint('circle', class {
  static get inputProperties() { return ['--circle-color']; }
  paint(ctx, geom, properties) {
    // Change the fill color.
    const color = properties.get('--circle-color');
    ctx.fillStyle = color.cssText;

    // Determine the center point and radius.
    const x = geom.width / 2;
    const y = geom.height / 2;
    const radius = Math.min(x, y);

    // Draw the circle \o/
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
    ctx.fill();
  }
});

<!DOCTYPE html>
<style>
#example {
    --image: url('#someUrlWhichIsLoading');
    background-image: paint(image-with-placeholder);
}
</style>

<div id="example"></div>

<script>
    CSS.registerProperty({
        name: '--image',
        syntax: '<image> | none',
        initialValue: 'none',
    });
    CSS.paintWorklet.addModule('image-placeholder.js');
</script>

// image-placeholder.js
registerPaint('image-with-placeholder', class {
    static get inputProperties() { return ['--image']; }
    paint(ctx, geom, properties) {
        const img = properties.get('--image');

        switch (img.state) {
            case 'ready':
                // The image is loaded! Draw the image.
                ctx.drawImage(img, 0, 0, geom.width, geom.height);
                break;
            case 'pending':
                // The image is loading, draw some mountains.
                drawMountains(ctx);
                break;
            case 'invalid':
            default:
                // The image is invalid (e.g. it didn't load), draw a sad face.
                drawSadFace(ctx);
                break;
        }
    }
});

<!DOCTYPE html>
<style>
#example {
  width: 200px;
  height: 200px;

  background-image:
    paint(arc, purple, 0.4turn, 0.8turn, 40px, 15px),
    paint(arc, blue, -20deg, 170deg, 30px, 20px),
    paint(arc, red, 45deg, 220deg, 50px, 10px);
}
</style>

<div id="example"></div>

<script>
    CSS.paintWorklet.addModule('arc.js');
</script>

// arc.js
registerPaint('arc', class {
  static get inputArguments() {
    return [
      '<color>',
      '<angle>',  // startAngle
      '<angle>',  // endAngle
      '<length>', // radius
      '<length>', // lineWidth
    ];
  }

  paint(ctx, geom, _, args) {
    ctx.strokeStyle = args[0].cssText;

    // Determine the center point.
    const x = geom.width / 2;
    const y = geom.height / 2;

    // Convert the start and end angles to radians.
    const startAngle = this.convertAngle(args[1]) - Math.PI / 2;
    const endAngle = this.convertAngle(args[2]) - Math.PI / 2;

    // Convert the radius and lineWidth to px.
    const radius = this.convertLength(args[3]);
    const lineWidth = this.convertLength(args[4]);

    ctx.lineWidth = lineWidth;

    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle, false);
    ctx.stroke();
  }

  convertAngle(angle) {
    switch (angle.unit) {
      case 'deg':
        return angle.value * Math.PI / 180;
      case 'rad':
        return angle.value;
      case 'grad':
        return angle.value * Math.PI / 200;
      case 'turn':
        return angle.value * Math.PI / 0.5;
      default:
        throw Error(`Unknown angle unit: ${angle.unit}`);
    }
  }

  convertLength(length) {
    switch (length.type) {
      case 'px':
        return length.value;
      default:
        throw Error(`Unkown length type: ${length.type}`);
    }
  }
});

<h1>
    Heading 1
</h1>
<h1>
    Another heading
</h1>

<style>
h1 {
    background-image: paint(heading-color);
}
</style>

<script>
    CSS.paintWorklet.addModule('heading-color.js');
</script>

// heading-color.js
registerPaint('heading-color', class {
    static get inputProperties() { return []; }
    paint(ctx, geom, properties) {
        // Select a color based on the width and height of the image.
        const width = geom.width;
        const height = geom.height;
        const color = colorArray[(width * height) % colorArray.length];

        // Draw just a solid image.
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, width, height);
    }
});

<style>
#overdraw {
    --border-width: 10;

    border-style: solid;
    border-width: calc(var(--border-width) * 1px);

    border-image-source: paint(overdraw);
    border-image-slice: 0 fill;
    border-image-outset: calc(var(--border-width) * 1px);

    width: 200px;
    height: 200px;
}
</style>
<div id="overdraw"></div>
<script>
    CSS.paintWorklet.addModule('overdraw.js');
</script>

// overdraw.js
registerPaint('overdraw', class {
    static get inputProperties() { return ['--border-width']; }
    paint(ctx, geom, properties) {
        const borderWidth = parseInt(properties.get('--border-width'));
        ctx.shadowColor = 'rgba(0,0,0,0.25)';
        ctx.shadowBlur = borderWidth;

        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.fillRect(borderWidth,
                     borderWidth,
                     geom.width - 2 * borderWidth,
                     geom.height - 2 * borderWidth);
    }
});