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 @@
             <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>