add linear gradient

desktop/sources/scripts/library.js

@@ -215,6 +215,12 @@ function Library (ronin) {
     return getComputedStyle(el).getPropertyValue(`--${variable}`)
   }
 
+  // Gradients
+
+  this.gradient = ([x1,y1,x2,y2], colors=['white','black']) => {
+    return ronin.surface.linearGradient(x1, y1, x2, y2, colors)
+  }
+
   // Pixels
 
   this.pixels = (rect, fn, q) => {

desktop/sources/scripts/surface.js

@@ -61,6 +61,15 @@ function Surface (ronin) {
     context.closePath()
   }
 
+  this.linearGradient = function(x1, y1, x2, y2, colors, context = this.context) {
+    const gradient = context.createLinearGradient(x1, y1, x2, y2)
+    const step = 1/(colors.length - 1)
+    colors.forEach((color,i) => {
+      gradient.addColorStop(i*step, color)
+    })
+    return gradient
+  }
+
   // Tracers
 
   this.trace = function (shape, context) {

examples/gradient.lisp

@@ -0,0 +1,16 @@
+(
+; gradients
+
+(clear)
+(fill 
+  (svg "M405,15 L405,15 L150,150 L195,90 L240,135 L120,195 L75,90 L135,165 L120,225 L90,240 L60,210 L90,150 L255,180 L285,180 L285,165 ")
+  (gradient 
+    (0 -50 600 175)
+    ("red" "orange" "blue" "green")))
+
+(stroke 
+  (svg "M255,60 L255,60 L135,180 L75,60 L195,210 L120,225 L105,225 L165,255 L225,195 L255,135 L285,150") 1
+  (gradient 
+    (50 0 180 0)
+    ("black" "white" "blue" "green")))
+)