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

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?

3/23/2020 4:06:56 PM

Jalaj Kumar

2 Answers

New Answer


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);


it is possible as in SVG also in canvas. In canvas there is in-built func (https://www.w3schools.com/graphics/canvas_gradients.asp) for that but you can make it yourself by repeating lines for linear and stroke ellipses for radial. SVG has also func for that: https://www.w3schools.com/graphics/svg_grad_linear.asp and https://www.w3schools.com/graphics/svg_grad_radial.asp