lib/CanvasUtils.js
function drawGradient(ctx, x1, y1, x2, y2, colorStops, x, y, width, height) {
  var grad;

  ctx.save();
  grad = ctx.createLinearGradient(x1, y1, x2, y2);

  colorStops.forEach(function (colorStop) {
    grad.addColorStop(colorStop.position, colorStop.color);
  });

  ctx.fillStyle = grad;
  ctx.fillRect(x, y, width, height);
  ctx.restore();
}
function drawGradient(ctx, x1, y1, x2, y2, colorStops, x, y, width, height) {
  var grad;

  ctx.save();
  grad = ctx.createLinearGradient(x1, y1, x2, y2);

  colorStops.forEach(function (colorStop) {
    grad.addColorStop(colorStop.position, colorStop.color);
  });

  ctx.fillStyle = grad;
  ctx.fillRect(x, y, width, height);
  ctx.restore();
}
function drawGradient ( ctx , x1 , y1 , x2 , y2 , colorStops , x , y , width , height ) { var grad ; ctx . save ( ) ; grad = ctx . createLinearGradient ( x1 , y1 , x2 , y2 ) ; colorStops . forEach ( function ( colorStop ) { grad . addColorStop ( colorStop . position , colorStop . color ) ; } ) ; ctx . fillStyle = grad ; ctx . fillRect ( x , y , width , height ) ; ctx . restore ( ) ; }
Draw a linear gradient

@param {CanvasContext} ctx
@param {Number} x1 gradient start-x coordinate
@param {Number} y1 gradient start-y coordinate
@param {Number} x2 gradient end-x coordinate
@param {Number} y2 gradient end-y coordinate
@param {Array} colorStops Array of {(String)color, (Number)position} values
@param {Number} x x-coordinate to begin fill
@param {Number} y y-coordinate to begin fill
@param {Number} width how wide to fill
@param {Number} height how tall to fill
Draw a linear gradient