From b1858930ce79909d67904d417ad6be406215934c Mon Sep 17 00:00:00 2001
From: Quinten Clause <quinten.clause@studioemma.com>
Date: Sun, 11 Aug 2024 15:47:32 +0200
Subject: [PATCH] test gear

---
 demos/navbutton/index.js |  3 ++-
 img/gear.svg             | 27 +++++++++++++++++++++++++++
 js/draw/path.js          |  6 +++++-
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 img/gear.svg

diff --git a/demos/navbutton/index.js b/demos/navbutton/index.js
index 8e5d356..dfb90b0 100644
--- a/demos/navbutton/index.js
+++ b/demos/navbutton/index.js
@@ -7,8 +7,9 @@ gg.emit('color', { bg: 'navy', fill: 'white' });
 gg.on('draw', ft({text: 'WIP: /js/draw/path.js'}).draw);
 
 let navbutton = path({
-    url: new URL('../../img/nav.svg', import.meta.url),
+    url: new URL('../../img/gear.svg', import.meta.url),
     //paths: ['M 0 0 L 1024 0 L 1024 1024 L 0 1024 Z'],
+    fills: ['red', 'orange','yellow'],
     w: 100,
     h: 100
 });
diff --git a/img/gear.svg b/img/gear.svg
new file mode 100644
index 0000000..17f3f7b
--- /dev/null
+++ b/img/gear.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M512,128c-212.08,0-384,171.92-384,384s171.92,384,384,384s384-171.92,384-384S724.08,128,512,128z M512,704
+			c-106.04,0-192-85.96-192-192s85.96-192,192-192s192,85.96,192,192S618.04,704,512,704z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M512,92C280.04,92,92,280.04,92,512s188.04,420,420,420s420-188.04,420-420S743.96,92,512,92z M512,722
+			c-115.98,0-210-94.02-210-210s94.02-210,210-210s210,94.02,210,210S627.98,722,512,722z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M821.02,384l132.09-132.09c-22.03-37.27-48.64-71.51-79.07-101.94l-0.01-0.01c-30.43-30.43-64.67-57.04-101.94-79.07
+			L640,202.98V16.13C599.09,5.6,556.2,0,512,0s-87.09,5.6-128,16.13v186.85L251.91,70.89c-74.55,44.05-136.97,106.47-181.02,181.02
+			L202.98,384H16.13C5.6,424.91,0,467.8,0,512s5.6,87.09,16.13,128h186.85L70.89,772.09c44.05,74.55,106.47,136.97,181.02,181.02
+			L384,821.02v186.85c40.91,10.53,83.8,16.13,128,16.13s87.09-5.6,128-16.13V821.02l132.09,132.09
+			c74.55-44.05,136.97-106.47,181.02-181.02L821.02,640h186.85c10.53-40.91,16.13-83.8,16.13-128s-5.6-87.09-16.13-128H821.02z
+			 M512,768c-141.38,0-256-114.62-256-256s114.62-256,256-256s256,114.62,256,256S653.38,768,512,768z"/>
+	</g>
+</g>
+</svg>
diff --git a/js/draw/path.js b/js/draw/path.js
index 974907f..bab5353 100644
--- a/js/draw/path.js
+++ b/js/draw/path.js
@@ -6,6 +6,7 @@ export default (options = {}) => {
     let defaults = {
         url: false,
         paths: [],
+        fills: [],
         x: 0,
         y: 0,
         w: 512,
@@ -16,7 +17,7 @@ export default (options = {}) => {
     Object.assign(options, defaults);
     options.draw = e => {
         let { ctx } = e;
-        let { paths, x, y, w, h, a } = options;
+        let { paths, fills, x, y, w, h, a } = options;
         let rad = a * Math.PI / 180;
         let cx = w / ow;
         let cy = h / oh;
@@ -35,6 +36,9 @@ export default (options = {}) => {
             let np = new Path2D();
             np.addPath(new Path2D(path), n);
             p.addPath(np, m);
+            if (fills[i]) {
+                ctx.fillStyle = fills[i];
+            }
             ctx.fill(p);
         });
     };