Is there a way to create lines/curves/shapes with SVG/canvas with gradient fills?

Question

In CSS it is easy to create gradients with linear-gradient and radial-gradient but is there a similiar way to create shapes/curves with gradient fills in SVG/Canvas? If yes, then how can I do this?

Answer 1

First create your gradient, than assign to a style and draw a shape, for example as follows:
let context = canvas.getContext('2d');
let gradient = context.createLinearGradient( 0,0,0,120);
gradient.addColorStop(0, '#0000FF');
gradient.addColorStop(0.5, '#00FF00');
gradient.addColorStop(1, '#FF0000');
context.fillStyle = gradient;
context.fillRect(30, 25, 350, 200);