Painting API example 1

rachelandrew · rachelandrew · commit 0b9503ca77a9 · 2021-08-27T15:29:34.000+01:00
diff --git a/houdini/css_painting_api/boxbg.js b/houdini/css_painting_api/boxbg.js
@@ -0,0 +1,21 @@
+registerPaint('boxbg', class {
+
+    static get contextOptions() { return {alpha: true}; }
+  
+    /*
+       use this function to retrieve any custom properties (or regular properties, such as 'height')
+       defined for the element, return them in the specified array
+    */
+    static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
+  
+    paint(ctx, size, props) {
+      /*
+         ctx -> drawing context
+         size -> paintSize: width and height
+         props -> properties: get() method
+      */
+  
+      ctx.fillStyle = props.get('--boxColor');
+      ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
+    }
+  });
diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+    li {
+        background-image: paint(boxbg);
+        --boxColor: hsla(55, 90%, 60%, 1.0);
+        }
+
+        li:nth-of-type(3n) {
+        --boxColor: hsla(155, 90%, 60%, 1.0);
+        --widthSubtractor: 20;
+        }
+
+        li:nth-of-type(3n+1) {
+        --boxColor: hsla(255, 90%, 60%, 1.0);
+        --widthSubtractor: 40;
+    }
+    </style>
+    
+
+    <title>CSS Painting API example</title>
+
+   
+  </head>
+  <body>
+    <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</li>
+</ul>
+  </body>
+  <script>
+    CSS.paintWorklet.addModule('boxbg.js');
+    </script>
+</html>
