canvasの使い方2/2(グラデーションから)

機能の続きです。

• 四角のグラデーションをつけます

function draw(){
var canvas = document.getElementById("draw");
var context = canvas.getContext("2D");
//グラデーション範囲を指定　x=0/y=0からx=0/y=300までを範囲に
var gradient = context.createLinearGradient(0,0,0,300);
//開始点0から0.5までを青、0.5から最後までを赤に
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'red');
//塗りつぶしの色にgradientを入れる
context.fillStyle = gradient;
context.fillRect(0,0,300,300);
}

• 丸のグラデーションをつけます

function draw(){
var canvas = document.getElementById("draw");
var context = canvas.getContext("2D");
//グラデーション範囲を指定 
var gradient = context.createRadialGradient(0,150,50,0,150,150);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
context.fillStyle = gradient;
context.fillRect(0,0,300,300);
}