A gradient is normally something you configure in code and then leave alone. The
createLinearGradientControls() helper from fabric/extensions turns it into
something you can drag directly on the canvas.
Select the rectangle and try the handles:
- The two handles joined by a line are the ends of the gradient vector
(
coords.x1/y1andcoords.x2/y2). Drag them to aim the gradient anywhere — the colours always run along that line. - The four handles sitting on the line are the colour stops. Dragging one
changes its
offset, sliding that colour along the gradient. They project onto the vector, so they stay on the line no matter where you drop them.
The object’s own corner handles still work, and the gradient handles follow along when you move, scale or rotate it.
For the gradient object itself — linear versus radial, coordinates and units — see the using gradients guide.