Canvas Gradient

by Nick Karnik

HTML

<canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn 't support canvas</canvas>

CSS

#MyCanvas {
      border:1px solid black;
  }

JavaScript

var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);


    // Add the colors with fixed stops at 1/4 of the width. 

    //gradient.addColorStop("0", "magenta");
    //gradient.addColorStop(".1", "blue");
    gradient.addColorStop(".1", "lightblue");
    //gradient.addColorStop(".2", "green");
    gradient.addColorStop(".2", "greenyellow");
    gradient.addColorStop(".3", "yellow");
    gradient.addColorStop(".36", "orange");
gradient.addColorStop(".6", "red");

    // Use the gradient. 

    ctx.fillStyle = gradient;
    //ctx.fillRect(0, 0, 300, 250);
    ctx.fillRect(0, 0, 600, 500);
}