-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
126 lines (97 loc) · 2.9 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
---
title: paint()
slug: Web/CSS/image/paint
page-type: css-function
browser-compat: css.types.image.paint
---
{{CSSRef}}
The **`paint()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) defines an {{cssxref("<image>")}} value generated with a PaintWorklet.
## Syntax
```css
paint(workletName, ...parameters)
```
where:
- _workletName_
- : The name of the registered worklet.
- _parameters_
- : Optional additional parameters to pass to the paintWorklet
## Examples
### Basic usage example
In JavaScript, we register the [paint worklet](/en-US/docs/Web/API/PaintWorkletGlobalScope):
```js
CSS.paintWorklet.addModule("boxbg.js");
```
...then, in the CSS, we define the `background-image` as a `paint()` type with the worklet name, `boxbg`, along with any variables (ex. `--boxColor` and `--widthSubtractor`) the worklet will use:
```css
li {
background-image: paint(boxbg);
--boxColor: hsl(55 90% 60% / 100%);
}
li:nth-of-type(3n) {
--boxColor: hsl(155 90% 60% / 100%);
--widthSubtractor: 20;
}
li:nth-of-type(3n + 1) {
--boxColor: hsl(255 90% 60% / 100%);
--widthSubtractor: 40;
}
```
The result will be the following:
{{EmbedGHLiveSample("css-examples/houdini/css_painting_api/example-boxbg.html", '100%', 400)}}
### With additional parameters
You can pass additional arguments via the CSS paint() function. In this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline:
```html hidden
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
</ul>
```
```js hidden
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```
```css
li {
--boxColor: hsl(55 90% 60% / 100%);
background-image: paint(hollowHighlights, stroke, 2px);
}
li:nth-of-type(3n) {
--boxColor: hsl(155 90% 60% / 100%);
background-image: paint(hollowHighlights, filled, 3px);
}
li:nth-of-type(3n + 1) {
--boxColor: hsl(255 90% 60% / 100%);
background-image: paint(hollowHighlights, stroke, 1px);
}
```
We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.
{{EmbedLiveSample("With additional parameters", 300, 300)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref('PaintWorkletGlobalScope')}}
- [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API)
- [Using the CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API/Guide)
- {{cssxref("<image>")}}
- [Canvas API](/en-US/docs/Web/API/Canvas_API)