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