Filling a rectangle with a linear gradient

by dpren

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient -->

<canvas id="canvas" height="265" width="265" />

CSS

body {
  background: #333;
  margin: 0;
  padding: 0;
}

JavaScript

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

var height = 265;

// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
var gradient = ctx.createLinearGradient(0, 0, 0, height);

// Add three color stops
gradient.addColorStop(.4999, 'blue');
gradient.addColorStop(.5, 'red');
/* gradient.addColorStop(1, 'red'); */

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 20, height);