How to create gradients in HTML5 canvas?

Question

If you want to create gradients, use this code!

var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

For example:
https://code.sololearn.com/WhqgNnn3ipYr/?ref=app

Answer 1

https://www.sololearn.com/discuss/1316935/?ref=app

Answer 2

Defining a gradient (left to right) that goes from black to white, as the fill style for the rectangle:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

For detail and more examples:
https://www.w3schools.com/tags/canvas_createlineargradient.asp