Scrawl-canvas v8 - Canvas test 003

Test purpose

• Setup a linear gradient, and a block entity which uses the gradient for its fillStyle value
• Check that we can successfully manipulate the gradient's start and end coordinates
• Check that we can successfully manipulate the palettes's start and end cursors
• Check that we can dynamically add and remove color stops
• Check that we can ease the gradient, including user-defined easing algorithms
• Check that when precision is set to 0, gradient uses the linear easing
• Check that when cyclePalette is set to true and the palette's end value is smaller than its start value, the gradient draws itself by going through the 0/999 endpoints

Touch test: not required

Note that the CSS gradients directly beneath the <canvas> element have been generated using the following CSS markup:

• #rgb { background: linear-gradient(0.25turn, rgb(0 0 0), rgb(255 0 0) 35%, rgb(0 0 255) 65%, rgb(255 255 255)); }
• #hsl { background: linear-gradient(0.25turn, hsl(0 0% 0%), hsl(0 100% 50%) 35%, hsl(240 100% 50%) 65%, hsl(0 0% 100%)); }
• #hwb { background: linear-gradient(0.25turn, hwb(0 0% 100%), hwb(0 0% 0%) 35%, hwb(240 0% 0%) 65%, hwb(0 100% 0%)); }
• #lab { background: linear-gradient(0.25turn, lab(0% 0 0), lab(53.23288178584245% 80.10930952982204 67.22006831026425) 35%, lab(32.302586667249486% 79.19666178930935 -107.86368104495168) 65%, lab(100% 0.00526049995830391 -0.010408184525267927)); }
• #lch { background: linear-gradient(0.25turn, lch(0% 0 0), lch(53.23288178584245% 104.57551843993618 40.00015790646365) 35%, lch(32.302586667249486% 133.81586201619493 306.2872015643272) 65%, lch(100% 0.011662039483869973 296.81292623674057)); }
• #oklab { background: linear-gradient(0.25turn, oklab(0% 0 0), oklab(62.796% 0.22486 0.12585) 35%, oklab(45.201% -0.03246 -0.31153) 65%, oklab(100% 0 0)); }
• #oklch { background: linear-gradient(0.25turn, oklch(0% 0 0), oklch(62.796% 0.25768 29.23388) 35%, oklch(45.201% 0.31321 264.05203) 65%, oklch(100% 0 0)); }

Annotated code