Correct matrices

demos/navbutton/index.js

@@ -3,12 +3,20 @@ import path from '../../js/draw/path.js';
 
 let navbutton = path({
     url: new URL('../../img/nav.svg', import.meta.url),
-    w: 48,
-    h: 48
+    paths: ['M 0 0 L 1024 0 L 1024 1024 L 0 1024 Z'],
+    w: 100,
+    h: 100
 });
 
+gg.on('resize', (e) => {
+    let { vw, vh } = e;
+    navbutton.x = vw / 2;
+    navbutton.y = vh / 2;
+});
+gg.emit('resize', gg.last('resize'));
+
 gg.on('step', (e) => {
-    //navbutton.a = e.t * 0.1;
+    navbutton.a = e.t * 0.1;
 });
 
 gg.on('draw', (e) => {

js/draw/path.js

@@ -20,16 +20,21 @@ export default (options = {}) => {
         let rad = a * Math.PI / 180;
         let cx = w / ow;
         let cy = h / oh;
+        // transform matrix
         let m = new DOMMatrix([
             Math.cos(rad) * cx,
             Math.sin(rad) * cx,
             -Math.sin(rad) * cy,
             Math.cos(rad) * cy,
             x, y
-        ]);    
+        ]);
+        // normalize matrix, puts the origin in the center
+        let n = new DOMMatrix([1, 0, 0, 1, -ow / 2, -oh / 2]);
         let p = new Path2D();
-        paths.forEach((path) => {
-            p.addPath(new Path2D(path), m);
+        paths.forEach((path, i) => {
+            let np = new Path2D();
+            np.addPath(new Path2D(path), n);
+            p.addPath(np, m);
         });
         ctx.fill(p);
     };