Gradient

Create a linear or radial gradient in the canvas' <defs> and use it as a fill or stroke.
The gradient is registered under an id; reference it from any shape with url(#id).

Syntax

                    
  new Gradient(style, colors, spread_method, id);
                

Parameters

style String : "horizontal", "vertical" or "radial"
colors Array : either plain colors, spread evenly — ["#000", "#fff"] — or [offset, color] pairs — [["0%", "#000"], ["100%", "#fff"]]
spread_method String : "pad" (default), "repeat" or "reflect" — how the gradient continues past its ends
id String : the id to reference the gradient by, as fill or stroke "url(#id)"

Gradients live in the canvas' <defs>, so create them after setCanvas(). clearCanvas() resets <defs> — recreate gradients if you clear inside an animation loop.

Example

                    
    new Gradient("horizontal", ["#695fe6", "#E089B1", "#F7BE93"], "pad", "warm");
    new rect(WIDTH/2, HEIGHT/2, 320, 180, "url(#warm)", 1, "none", 0, "center", 8);
              
        
    new Gradient("radial", [["10%", "#695fe6"], ["100%", "#000"]], "pad", "glow");
    new circle(WIDTH/2, HEIGHT/2, 100, "url(#glow)", 1, "none", 0);