Scrawl-canvas Gradient objects implement the Canvas API’s createLinearGradient method. The resulting CanvasGradient object can be used by any Scrawl-canvas entity as its fillStyle or strokeStyle.
import { constructors } from '../core/library.js';
import { doCreate, pushUnique, Ωempty } from '../helper/utilities.js';
import { releaseCoordinate, requestCoordinate } from '../untracked-factory/coordinate.js';
import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';Shared constants
import { BLANK, STYLES, T_GRADIENT } from '../helper/shared-vars.js';const Gradient = function (items = Ωempty) {
this.stylesInit(items);
return this;
};const P = Gradient.prototype = doCreate();
P.type = T_GRADIENT;
P.lib = STYLES;
P.isArtefact = false;
P.isAsset = false;baseMix(P);
stylesMix(P);P.packetExclusions = pushUnique(P.packetExclusions, ['palette']);buildStyle - internal function: creates the linear gradient on the Cell’s CanvasRenderingContext2D engine, and then adds the color stops to it.
P.buildStyle = function (cell) {
if (cell) {
const engine = cell.engine;
if (engine) {
const gradient = engine.createLinearGradient(...this.gradientArgs);
return this.addStopsToGradient(gradient, this.paletteStart, this.paletteEnd, this.cyclePalette);
}
}
return BLANK;
};updateGradientArgs - internal function
P.updateGradientArgs = function (x, y, roll) {
const gradientArgs = this.gradientArgs,
currentStart = this.currentStart,
currentEnd = this.currentEnd;
let sx = currentStart[0] + x,
sy = currentStart[1] + y,
ex = currentEnd[0] + x,
ey = currentEnd[1] + y;check to correct situation where coordinates represent a ‘0 x 0’ box - which will cause errors in some browsers
if (sx === ex && sy === ey) ex++;
if (roll) {
const coord = requestCoordinate();
[sx, sy] = coord.setFromArray([sx, sy]).rotate(roll);
[ex, ey] = coord.setFromArray([ex, ey]).rotate(roll);
releaseCoordinate(coord);
}
gradientArgs.length = 0;
gradientArgs.push(sx, sy, ex, ey);
};scrawl.makeGradient({
name: 'colored-pipes',
endX: '100%',
cyclePalette: true,
colors: [
[0, 'black'],
[99, 'red'],
[199, 'black'],
[299, 'blue'],
[399, 'black'],
[499, 'gold'],
[599, 'black'],
[699, 'green'],
[799, 'black'],
[899, 'lavender'],
[999, 'black']
],
})
scrawl.makeBlock({
name: 'animated-block',
width: 150,
height: 150,
startX: 180,
startY: 120,
handleX: 'center',
handleY: 'center',
strokeStyle: 'coral',
fillStyle: 'colored-pipes',
lineWidth: 2,
method: 'fillAndDraw',
});
export const makeGradient = function (items) {
if (!items) return false;
return new Gradient(items);
};
constructors.Gradient = Gradient;