Skip to content

Commit 0b9503c

Browse files
committed
Painting API example 1
1 parent e961108 commit 0b9503c

File tree

2 files changed

+75
-0
lines changed

2 files changed

+75
-0
lines changed

houdini/css_painting_api/boxbg.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
registerPaint('boxbg', class {
2+
3+
static get contextOptions() { return {alpha: true}; }
4+
5+
/*
6+
use this function to retrieve any custom properties (or regular properties, such as 'height')
7+
defined for the element, return them in the specified array
8+
*/
9+
static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
10+
11+
paint(ctx, size, props) {
12+
/*
13+
ctx -> drawing context
14+
size -> paintSize: width and height
15+
props -> properties: get() method
16+
*/
17+
18+
ctx.fillStyle = props.get('--boxColor');
19+
ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
20+
}
21+
});
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<style>
8+
li {
9+
background-image: paint(boxbg);
10+
--boxColor: hsla(55, 90%, 60%, 1.0);
11+
}
12+
13+
li:nth-of-type(3n) {
14+
--boxColor: hsla(155, 90%, 60%, 1.0);
15+
--widthSubtractor: 20;
16+
}
17+
18+
li:nth-of-type(3n+1) {
19+
--boxColor: hsla(255, 90%, 60%, 1.0);
20+
--widthSubtractor: 40;
21+
}
22+
</style>
23+
24+
25+
<title>CSS Painting API example</title>
26+
27+
28+
</head>
29+
<body>
30+
<ul>
31+
<li>item 1</li>
32+
<li>item 2</li>
33+
<li>item 3</li>
34+
<li>item 4</li>
35+
<li>item 5</li>
36+
<li>item 6</li>
37+
<li>item 7</li>
38+
<li>item 8</li>
39+
<li>item 9</li>
40+
<li>item 10</li>
41+
<li>item 11</li>
42+
<li>item 12</li>
43+
<li>item 13</li>
44+
<li>item 14</li>
45+
<li>item 15</li>
46+
<li>item 16</li>
47+
<li>item 17</li>
48+
<li>item</li>
49+
</ul>
50+
</body>
51+
<script>
52+
CSS.paintWorklet.addModule('boxbg.js');
53+
</script>
54+
</html>

0 commit comments

Comments
 (0)