var canvas= document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
context.rect(100,100,400,400);
var grd = context.createLinearGradient(200,300,600,300);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"white");
grd.addColorStop(1,"black");
context.fillStyle = grd;
context.fill()
<canvas id="canvas"></canvas>