From bcc4e5ee0b2c0cf48af7a6d4893e55dadd558ccd Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Tue, 31 Jan 2023 19:12:00 +0100
Subject: [PATCH] Base: Add a test page for canvas patterns

---
 Base/res/html/misc/canvas-patterns.html | 55 +++++++++++++++++++++++++
 Base/res/html/misc/welcome.html         |  1 +
 2 files changed, 56 insertions(+)
 create mode 100644 Base/res/html/misc/canvas-patterns.html

diff --git a/Base/res/html/misc/canvas-patterns.html b/Base/res/html/misc/canvas-patterns.html
new file mode 100644
index 0000000000..d2d4d31693
--- /dev/null
+++ b/Base/res/html/misc/canvas-patterns.html
@@ -0,0 +1,55 @@
+<h1>Canvas Patterns</h1>
+<em>Canvas pattern: Repeat (heart)</em><br><code>ctx.createPattern(img, "repeat")</code><br>
+<canvas id="canvas-0" width="230" height="210"></canvas><br><br>
+<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat")</code><br>
+<canvas id="canvas-1" width="400" height="300"></canvas><br><br>
+<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat-x")</code><br>
+<canvas id="canvas-2" width="400" height="300"></canvas><br><br>
+<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat-y")</code><br>
+<canvas id="canvas-3" width="400" height="300"></canvas><br><br>
+<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "no-repeat")</code><br>
+<canvas id="canvas-4" width="400" height="300"></canvas>
+<style>
+canvas {
+  border: 1px solid black;
+}
+</style>
+<script>
+const img = new Image();
+img.src = "car.png";
+
+img.onload = () => {
+  const heartDemo = (canvasId) => {
+    const canvas = document.getElementById(canvasId);
+    const ctx = canvas.getContext("2d");
+    const pattern = ctx.createPattern(img, "repeat");
+    const scale = 1.5
+    const scaleValues = l =>l.map(value => value * scale);
+    ctx.fillStyle = pattern;
+    // Heart path taken from: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
+    ctx.beginPath();
+    ctx.moveTo(...scaleValues([75, 40]));
+    ctx.bezierCurveTo(...scaleValues([75, 37, 70, 25, 50, 25]));
+    ctx.bezierCurveTo(...scaleValues([20, 25, 20, 62.5, 20, 62.5]));
+    ctx.bezierCurveTo(...scaleValues([20, 80, 40, 102, 75, 120]));
+    ctx.bezierCurveTo(...scaleValues([110, 102, 130, 80, 130, 62.5]));
+    ctx.bezierCurveTo(...scaleValues([130, 62.5, 130, 25, 100, 25]));
+    ctx.bezierCurveTo(...scaleValues([85, 25, 75, 37, 75, 40]));
+    ctx.fill();
+  }
+
+  const makePatternDemo = (canvasId, repeat) => {
+    const canvas = document.getElementById(canvasId);
+    const ctx = canvas.getContext("2d");
+    const pattern = ctx.createPattern(img, repeat);
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  heartDemo("canvas-0")
+  makePatternDemo("canvas-1", "repeat");
+  makePatternDemo("canvas-2", "repeat-x");
+  makePatternDemo("canvas-3", "repeat-y");
+  makePatternDemo("canvas-4", "no-repeat");
+};
+</script>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 88563300a7..0a99d20b6b 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -186,6 +186,7 @@
             <li><h3>Canvas</h3></li>
             <li><a href="canvas.html">canvas 2D test</a></li>
             <li><a href="canvas-gradients.html">canvas gradients!</a></li>
+            <li><a href="canvas-patterns.html">canvas patterns</a></li>
             <li><a href="canvas-rotate.html">canvas rotate()</a></li>
             <li><a href="canvas-path-rect.html">canvas path rect test</a></li>
             <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>