Base: Add test page for canvas gradients

Base/res/html/misc/canvas-gradients.html

@@ -0,0 +1,138 @@
+
+<h1>Canvas Gradients</h1>
+<h2>Radial Gradients</h2>
+<em>MDN example</em><br>
+<canvas id="mdnRadial" width="200" height="200"></canvas>
+<h3>Interactive Radial Gradients (mouse over)</h3>
+<hr>
+<em>A radial gradient</em><br>
+<canvas id="radialHell1" width="400" height="300"></canvas>
+<br>
+<hr>
+<em>An inverted radial gradient (start circle larger than end circle)</em><br>
+<canvas id="radialHell2" width="400" height="300"></canvas>
+
+<h2>Conic Gradients</h2>
+<canvas id="conic" width="200" height="200"></canvas>
+<h2>Linear Gradients</h2>
+<em>This time in a path to spice things up!</em><br>
+<canvas id="linear" width="200" height="200"></canvas>
+
+<script>
+{
+ // MDN radial gradient example
+ const canvas = document.getElementById("mdnRadial");
+ const ctx = canvas.getContext("2d");
+
+ const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);
+
+ gradient.addColorStop(0, "pink");
+ gradient.addColorStop(0.9, "white");
+ gradient.addColorStop(1, "green");
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(20, 20, 160, 160);
+}
+</script>
+
+<script>
+// Interactive radial gradients... The MacDue debugging experience live!
+
+const makeMouseDemo = (canvasId, body) => {
+ const canvas = document.getElementById(canvasId);
+ const ctx = canvas.getContext("2d");
+ const mouse = { x: 0, y: 0 };
+ let lastMouse = mouse;
+ const mouseEvent = (e) => { mouse.x = e.offsetX; mouse.y = e.offsetY }
+ canvas.addEventListener("mousemove", mouseEvent);
+ body(canvas, ctx, canvas.width/2, canvas.height/2);
+ const loop = () => {
+ if (mouse.x != lastMouse.x || mouse.y != lastMouse.y)
+ body(canvas, ctx, mouse.x, mouse.y);
+ lastMouse = { ...mouse };
+ requestAnimationFrame(loop);
+ };
+ requestAnimationFrame(loop);
+}
+
+makeMouseDemo("radialHell1", (canvas, ctx, mX, mY) => {
+ var grd = ctx.createRadialGradient(mX, mY, 10, canvas.width/2, canvas.height/2, 100);
+ grd.addColorStop(0, "red");
+ grd.addColorStop(0.4, "purple");
+ grd.addColorStop(1, "cyan");
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = grd;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+})
+
+makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
+ var grd = ctx.createRadialGradient(mX, mY, 100, canvas.width/2, canvas.height/2, 10);
+ grd.addColorStop(0, "pink");
+ grd.addColorStop(0.6, "blue");
+ grd.addColorStop(1, "orange");
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = grd;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+})
+</script>
+<script>
+{
+ const canvas = document.getElementById("conic");
+ const ctx = canvas.getContext("2d");
+
+ const gradient = ctx.createConicGradient(0, 100, 100);
+
+ gradient.addColorStop(0, "red");
+ gradient.addColorStop(0.25, "orange");
+ gradient.addColorStop(0.5, "yellow");
+ gradient.addColorStop(0.75, "green");
+ gradient.addColorStop(1, "blue");
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(20, 20, 200, 200);
+}
+</script>
+<script>
+{
+ const canvas = document.getElementById("linear");
+ const ctx = canvas.getContext("2d");
+
+ const gradient = ctx.createLinearGradient(20, 20, 220, 120);
+ ctx.createLinearGradient(0,0,200,50);
+ gradient.addColorStop(0,"red");
+ gradient.addColorStop(0.15,"yellow");
+ gradient.addColorStop(0.3,"green");
+ gradient.addColorStop(0.45,"aqua");
+ gradient.addColorStop(0.6,"blue");
+ gradient.addColorStop(0.7,"fuchsia");
+ gradient.addColorStop(1,"red");
+
+ ctx.fillStyle = gradient;
+
+ const starPath = (cx, cy, spikes, outerRadius, innerRadius) => {
+ let x = cx;
+ let y = cy;
+ let rot = Math.PI / 2 * 3;
+ const step = Math.PI / spikes;
+
+ ctx.beginPath();
+ ctx.moveTo(cx, cy - outerRadius)
+ for (i = 0; i < spikes; i++) {
+ x = cx + Math.cos(rot) * outerRadius;
+ y = cy + Math.sin(rot) * outerRadius;
+ ctx.lineTo(x, y)
+ rot += step
+
+ x = cx + Math.cos(rot) * innerRadius;
+ y = cy + Math.sin(rot) * innerRadius;
+ ctx.lineTo(x, y)
+ rot += step
+ }
+ ctx.lineTo(cx, cy - outerRadius);
+ ctx.closePath();
+ }
+
+ starPath(canvas.width/2,canvas.height/2,5,100,60);
+ ctx.fill();
+}
+</script>

Base/res/html/misc/welcome.html

@@ -185,6 +185,7 @@ <h2>JavaScript/Wasm</h2>
  <li><a href="exceptions.html">Exceptions</a></li>
  <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-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>