From 67aceb6c67cb06b1b8607fa74a4fb6180a151fd1 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Thu, 6 Apr 2023 21:18:26 +0100
Subject: [PATCH] Base: Add canvas clip path test page

---
 Base/res/html/misc/canvas-clip-path.html | 44 ++++++++++++++++++++++++
 Base/res/html/misc/welcome.html          |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 Base/res/html/misc/canvas-clip-path.html

diff --git a/Base/res/html/misc/canvas-clip-path.html b/Base/res/html/misc/canvas-clip-path.html
new file mode 100644
index 0000000000..8c698ee272
--- /dev/null
+++ b/Base/res/html/misc/canvas-clip-path.html
@@ -0,0 +1,44 @@
+<style>
+  canvas {
+    border: 1px solid black;
+  }
+</style>
+<!-- Examples taken from MDN -->
+<b>(nonzero) path clipping:</b><br>
+<canvas id="canvas1" width="200" height="160"></canvas>
+<br>
+<b>evenodd path clipping:</b><br>
+<canvas id="canvas2" width="200" height="160"></canvas>
+<script>
+{
+  const canvas = document.getElementById("canvas1");
+  const ctx = canvas.getContext("2d");
+
+  // Create circular clipping region
+  ctx.beginPath();
+  ctx.arc(0/*FIMXE: Should be 100, but ctx.arc() is currently broken*/, 75, 50, 0, Math.PI * 2);
+  ctx.clip();
+
+  // Draw stuff that gets clipped
+  ctx.fillStyle = "blue";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = "orange";
+  ctx.fillRect(0, 0, 100, 100);
+}
+</script>
+<script>
+{
+  const canvas = document.getElementById("canvas2");
+  const ctx = canvas.getContext("2d");
+
+  // Create clipping path
+  let region = new Path2D();
+  region.rect(80, 10, 20, 130);
+  region.rect(40, 50, 100, 50);
+  ctx.clip(region, "evenodd");
+
+  // Draw stuff that gets clipped
+  ctx.fillStyle = "blue";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+</script>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 8dd0f24eea..bc01e6bf28 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -194,6 +194,7 @@
             <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
             <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="canvas-clip-path.html">canvas clip paths</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>