Canvasの塗りつぶし色にグラデーションを設定する

以前、 UIViewの背景にグラデーションを設定したこと がありましたが、今回はCanvasに同じグラデーションを設定してみます。

UIViewの背景にグラデーションを設定しよう。 - みかづきブログ その3

DEMO

HTML

<canvas id="canvas"></canvas>

JavaScript

(function(win, doc) {
  
  "use strict";
  
  var canvas = doc.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      grad = ctx.createLinearGradient(0,0, 0,win.innerHeight); // グラデーションを作成
  
  canvas.width = win.innerWidth;
  canvas.height = win.innerHeight;
  
  // グラデーションレイヤーに色を設定
  grad.addColorStop(0,"rgb(222, 173, 69)");
  grad.addColorStop(1,"rgb(227, 138, 184)");
  
  ctx.fillStyle = grad; // 塗りつぶし色にグラデーションを設定
  ctx.rect(0, 0, win.innerWidth, win.innerHeight);
  ctx.fill();

})(this, document);