canvasでcreateRadialGradientを使ってグラデーションを作る。

createRadialGradient(スタートのx座標,スタートのy座標,スタートの半径,終わりのx座標,終わりのy座標,終わりの半径);

見たいな感じ。
同心円状にグラデーションするならスタートのx,yと終わりのx,yは同じ位置でよい。

    var grad = ctx.createRadialGradient(50,50,0,50,50,50);

そのあとスタートの半径から終わりの半径まで、どの割合でどの色を指定するか指定する。

    grad.addColorStop(0,'#ffffff');//中心
    grad.addColorStop(0.4,'#00ff00');
    grad.addColorStop(0.8,'#ff0000');
    grad.addColorStop(1,'black');//一番外側 

あとはcanvasに書いてあげればおけ。

$(window).on("load",function(){
  drawGradient();
});
function drawGradient() {

    var canvas = document.getElementById('stage');
    var ctx = canvas.getContext('2d');

    //パスのリセット
    ctx.beginPath();
    //グラデーション領域
    var grad = ctx.createRadialGradient(50,50,0,50,50,50);
    grad.addColorStop(0,'#ffffff');
    grad.addColorStop(0.4,'#00ff00');
    grad.addColorStop(0.8,'#ff0000');
    grad.addColorStop(1,'black'); 
    ctx.fillStyle = grad;
    ctx.rect(0,0,100,100);
    ctx.fill();
}

サンプル

See the Pen mOZRzb by ziyudom (@ziyudom) on CodePen.