Canvas - gradient

by M J Khan

HTML

<canvas id="canvasSurface" width="600" height="310">
				Your browser does not support HTML5.
			</canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

(function() {
  var drawingSurface = getCanvasElement();
  var ctxt = getContext(drawingSurface);
  ctxt.lineWidth = 3;
  ctxt.rect(150, 150, 250, 175);
  /*
  createRadialGradient takes six parameters, which specify the center point and radius of two circles and the color transitions through the stops along the cone formed by the two circles.
  */
  var gradient = ctxt.createRadialGradient(200, 200, 5, 250, 250, 100);
  gradient.addColorStop(0, "Red");
  gradient.addColorStop(.5, "Orange");
  gradient.addColorStop(1, "Blue");
  ctxt.fillStyle = gradient;
  ctxt.fill();
  ctxt.stroke();

  function getCanvasElement() {
    return document.getElementById("canvasSurface");
  };

  function getContext(drawingSurface) {
    /* 
    The context is an object that provides the API methods you use to draw on the canvas. 
    Now, <canvas> supports only a 2d context    
    */
    return drawingSurface.getContext("2d");
  };

})();