CSS Function - paint()

The paint() function in CSS is used to define an <image> value that is generated with a PaintWorklet. A PaintWorklet helps developers to define some custom painting functions that can be directly used in CSS for various properties such as background, border, etc.

Syntax

paint(workletName, ...parameters)

In the above syntax, the function paint() contains following arguments:

  • workletName: Specifies the name of the registered worklet.

  • parameters: Specifies additional parameters to pass to the PaintWorklet. It is optional.

CSS paint() - Creation of Paint Worklet

Following example demonstrates the use of paint() function.

You need to create a paint worklet. To define a paint worklet, you need to load a CSS paint worklet using CSS.paintWorklet.addModule('board.js'). To register a paint worklet class, you need to use the registerPaint function.

In the following example, a paint worklet is created and used as a background image of a <textarea>. A <textarea> is used as it is resizable.

Note: As with almost all new APIs, CSS Paint API is only available over HTTPS (or localhost).

<html>
<head>
   <script>
      if ("paintWorklet" in CSS) {
      CSS.paintWorklet.addModule("board.js");
      }
   </script>

<style>
   textarea {
      background-image: url(board);
      background-image: paint(board);
   }
</style> 
</head>
<body>
   <h2>CSS Function paont()</h2>
   <textarea></textarea>
</body>
</html>

The Javascript board.js is as below:

class TestPainter {
   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;
      // const dpr = window.devicePixelRatio;
      // const dpr = Window.devicePixelRatio;
      // Use `ctx` as if it was a normal canvas
      const colors = ["yellow", "black", "white"];
      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 the class under a particular name
registerPaint("board", TestPainter);
Advertisements