2 files changed, 41 insertions, 0 deletions
diff --git a/Base/res/html/misc/canvas-path2d.html b/Base/res/html/misc/canvas-path2d.html
new file mode 100644
index 0000000000..3531e5dde9
--- /dev/null
+++ b/Base/res/html/misc/canvas-path2d.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>Path2D test</title>
+</head>
+<body>
+    <h1>Path2D test</h1>
+    <p>These examples are taken from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D">MDN</a>.</p>
+
+    <h2>Basic example</h2>
+    <p>Should be a square and a circle, both as outlines.</p>
+    <canvas id="canvas"></canvas>
+
+    <h2>SVG Path example</h2>
+    <p>Should display a filled black square.</p>
+    <canvas id="canvas-2"></canvas>
+
+    <script>
+        // Basic example
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        let path1 = new Path2D();
+        path1.rect(10, 10, 100,100);
+
+        let path2 = new Path2D(path1);
+        path2.moveTo(220, 60);
+        path2.arc(170, 60, 50, 0, 2 * Math.PI);
+
+        ctx.stroke(path2);
+
+        // SVG Path example
+        const canvas2 = document.getElementById('canvas-2');
+        const ctx2 = canvas2.getContext('2d');
+        let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+        ctx2.fill(p);
+    </script>
+</body>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index fd5a83e861..0ff3d086e8 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -178,6 +178,7 @@
             <li><a href="img-canvas.html">canvas drawImage() test</a></li>
             <li><a href="canvas-path.html">canvas path house!</a></li>
             <li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
+            <li><a href="canvas-path2d.html">Path2D</a></li>
             <li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
             <li><h3>Wasm</h3></li>
             <li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>