Add CSS Painting API examples

mdn · Jan 24, 2023 · 9116e43 · 9116e43
1 parent bdf9917
commit 9116e43
Show file tree

Hide file tree

Showing 20 changed files with 374 additions and 0 deletions.
diff --git a/css-painting/custom-properties/boxbg.js b/css-painting/custom-properties/boxbg.js
@@ -0,0 +1,32 @@
+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/css-painting/custom-properties/index.html b/css-painting/custom-properties/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>CSS Painting API example</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </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>
+</html>
diff --git a/css-painting/custom-properties/script.js b/css-painting/custom-properties/script.js
@@ -0,0 +1 @@
+CSS.paintWorklet.addModule("boxbg.js");
diff --git a/css-painting/custom-properties/style.css b/css-painting/custom-properties/style.css
@@ -0,0 +1,14 @@
+li {
+  background-image: paint(boxbg);
+  --boxColor: hsl(55 90% 60% / 1);
+}
+
+li:nth-of-type(3n) {
+  --boxColor: hsl(155 90% 60% / 1);
+  --widthSubtractor: 20;
+}
+
+li:nth-of-type(3n + 1) {
+  --boxColor: hsl(255 90% 60% / 1);
+  --widthSubtractor: 40;
+}
diff --git a/css-painting/fancy-header-highlight/header-highlight.js b/css-painting/fancy-header-highlight/header-highlight.js
@@ -0,0 +1,49 @@
+registerPaint(
+  "headerHighlight",
+  class {
+    static get inputProperties() {
+      return ["--highColor"];
+    }
+    static get contextOptions() {
+      return { alpha: true };
+    }
+
+    paint(ctx, size, props) {
+      /* set where to start the highlight & dimensions */
+      const x = 0;
+      const y = size.height * 0.3;
+      const blockWidth = size.width * 0.33;
+      const highlightHeight = size.height * 0.85;
+      const color = props.get("--highColor");
+
+      ctx.fillStyle = color;
+
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(blockWidth, y);
+      ctx.lineTo(blockWidth + highlightHeight, highlightHeight);
+      ctx.lineTo(x, highlightHeight);
+      ctx.lineTo(x, y);
+      ctx.closePath();
+      ctx.fill();
+
+      /* create the dashes */
+      for (let start = 0; start < 8; start += 2) {
+        ctx.beginPath();
+        ctx.moveTo(blockWidth + start * 10 + 10, y);
+        ctx.lineTo(blockWidth + start * 10 + 20, y);
+        ctx.lineTo(
+          blockWidth + start * 10 + 20 + highlightHeight,
+          highlightHeight
+        );
+        ctx.lineTo(
+          blockWidth + start * 10 + 10 + highlightHeight,
+          highlightHeight
+        );
+        ctx.lineTo(blockWidth + start * 10 + 10, y);
+        ctx.closePath();
+        ctx.fill();
+      }
+    } // paint
+  }
+);
diff --git a/css-painting/fancy-header-highlight/index.html b/css-painting/fancy-header-highlight/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>CSS Painting API example</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+
+  <body>
+    <h1 class="fancy">Largest Header</h1>
+    <h3 class="fancy">Medium size header</h3>
+    <h6 class="fancy">Smallest Header</h6>
+  </body>
+</html>
diff --git a/css-painting/fancy-header-highlight/script.js b/css-painting/fancy-header-highlight/script.js
@@ -0,0 +1 @@
+CSS.paintWorklet.addModule("header-highlight.js");
diff --git a/css-painting/fancy-header-highlight/style.css b/css-painting/fancy-header-highlight/style.css
@@ -0,0 +1,12 @@
+.fancy {
+  background-image: paint(headerHighlight);
+}
+h1 {
+  --highColor: hsl(155 90% 60% / 0.7);
+}
+h3 {
+  --highColor: hsl(255 90% 60% / 0.5);
+}
+h6 {
+  --highColor: hsl(355 90% 60% / 0.3);
+}
diff --git a/css-painting/half-highlight-fixed-size/header-highlight.js b/css-painting/half-highlight-fixed-size/header-highlight.js
@@ -0,0 +1,22 @@
+registerPaint(
+  "headerHighlight",
+  class {
+    /*
+         define if alphatransparency is allowed alpha
+         is set to true by default. If set to false, all
+         colors used on the canvas will be fully opaque
+      */
+    static get contextOptions() {
+      return { alpha: true };
+    }
+
+    /*
+          ctx is the 2D drawing context
+          a subset of the HTML Canvas API.
+      */
+    paint(ctx) {
+      ctx.fillStyle = "hsl(55 90% 60% / 1.0)";
+      ctx.fillRect(0, 15, 200, 20); /* order: x, y, w, h */
+    }
+  }
+);
diff --git a/css-painting/half-highlight-fixed-size/index.html b/css-painting/half-highlight-fixed-size/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>CSS Painting API example</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+
+  <body>
+    <h1 class="fancy">My Cool Header</h1>
+  </body>
+</html>
diff --git a/css-painting/half-highlight-fixed-size/script.js b/css-painting/half-highlight-fixed-size/script.js
@@ -0,0 +1 @@
+CSS.paintWorklet.addModule("header-highlight.js");
diff --git a/css-painting/half-highlight-fixed-size/style.css b/css-painting/half-highlight-fixed-size/style.css
@@ -0,0 +1,4 @@
+.fancy {
+    background-image: paint(headerHighlight);
+  }
+
diff --git a/css-painting/half-highlight-paintsize/header-highlight.js b/css-painting/half-highlight-paintsize/header-highlight.js
@@ -0,0 +1,17 @@
+registerPaint(
+  "headerHighlight",
+  class {
+    static get contextOptions() {
+      return { alpha: true };
+    }
+
+    /*
+    ctx is the 2D drawing context
+    size is the paintSize, the dimensions (height and width) of the box being painted
+  */
+    paint(ctx, size) {
+      ctx.fillStyle = "hsl(55 90% 60% / 1.0)";
+      ctx.fillRect(0, size.height / 3, size.width * 0.4, size.height * 0.6);
+    }
+  }
+);
diff --git a/css-painting/half-highlight-paintsize/index.html b/css-painting/half-highlight-paintsize/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>CSS Painting API example</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+
+  <body>
+    <h1 class="fancy">Largest Header</h1>
+    <h6 class="fancy">Smallest Header</h6>
+    <h3 class="fancy half">50% width header</h3>
+  </body>
+</html>
diff --git a/css-painting/half-highlight-paintsize/script.js b/css-painting/half-highlight-paintsize/script.js
@@ -0,0 +1 @@
+CSS.paintWorklet.addModule("header-highlight.js");
diff --git a/css-painting/half-highlight-paintsize/style.css b/css-painting/half-highlight-paintsize/style.css
@@ -0,0 +1,6 @@
+.fancy {
+  background-image: paint(headerHighlight);
+}
+.half {
+  width: 50%;
+}
diff --git a/css-painting/hollow-highlight/hollow.js b/css-painting/hollow-highlight/hollow.js
@@ -0,0 +1,72 @@
+registerPaint(
+  "hollowHighlights",
+  class {
+    static get inputProperties() {
+      return ["--boxColor"];
+    }
+    // Input arguments that can be passed to the `paint` function
+    static get inputArguments() {
+      return ["*", "<length>"];
+    }
+
+    static get contextOptions() {
+      return { alpha: true };
+    }
+
+    paint(ctx, size, props, args) {
+      // ctx   -> drawing context
+      // size  -> size of the box being painted
+      // props -> list of custom properties available to the element
+      // args  -> list of arguments set when calling the paint() function in the CSS
+
+      // where to start the highlight & dimensions
+      const x = 0;
+      const y = size.height * 0.3;
+      const blockWidth = size.width * 0.33;
+      const blockHeight = size.height * 0.85;
+
+      // the values passed in the paint() function in the CSS
+      const color = props.get("--boxColor");
+      const strokeType = args[0].toString();
+      const strokeWidth = parseInt(args[1]);
+
+      // set the stroke width
+      ctx.lineWidth = strokeWidth ?? 1.0;
+      // set the fill type
+      if (strokeType === "stroke") {
+        ctx.fillStyle = "transparent";
+        ctx.strokeStyle = color;
+      } else if (strokeType === "filled") {
+        ctx.fillStyle = color;
+        ctx.strokeStyle = color;
+      } else {
+        ctx.fillStyle = "none";
+        ctx.strokeStyle = "none";
+      }
+
+      // block
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(blockWidth, y);
+      ctx.lineTo(blockWidth + blockHeight, blockHeight);
+      ctx.lineTo(x, blockHeight);
+      ctx.lineTo(x, y);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      // dashes
+      for (let i = 0; i < 4; i++) {
+        let start = i * 2;
+        ctx.beginPath();
+        ctx.moveTo(blockWidth + start * 10 + 10, y);
+        ctx.lineTo(blockWidth + start * 10 + 20, y);
+        ctx.lineTo(blockWidth + start * 10 + 20 + blockHeight, blockHeight);
+        ctx.lineTo(blockWidth + start * 10 + 10 + blockHeight, blockHeight);
+        ctx.lineTo(blockWidth + start * 10 + 10, y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+      }
+    } // paint
+  }
+);
diff --git a/css-painting/hollow-highlight/index.html b/css-painting/hollow-highlight/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>CSS Painting API example</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </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>
+</html>
diff --git a/css-painting/hollow-highlight/script.js b/css-painting/hollow-highlight/script.js
@@ -0,0 +1 @@
+CSS.paintWorklet.addModule("hollow.js");
diff --git a/css-painting/hollow-highlight/style.css b/css-painting/hollow-highlight/style.css
@@ -0,0 +1,14 @@
+li {
+  --boxColor: hsl(155 90% 60% / 0.5);
+  background-image: paint(hollowHighlights, stroke, 5px);
+}
+
+li:nth-of-type(3n) {
+  --boxColor: hsl(255 90% 60% / 0.5);
+  background-image: paint(hollowHighlights, filled, 3px);
+}
+
+li:nth-of-type(3n + 1) {
+  --boxColor: hsl(355 90% 60% / 0.5);
+  background-image: paint(hollowHighlights, stroke, 1px);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		CSS.paintWorklet.addModule("header-highlight.js");