Learning Canvas, the Hero of HTML5 - HTML5 Mobile Game Development - page 298

Figure 15-3: Canvas gradients.
Listing 15-4: Creating canvas gradients
<script src='jquery.min.js'></script>
<style> canvas { background-color:black; } </style>
<canvas id="mycanvas", width="600" height="400"></canvas>
<script>
var canvas = $("#mycanvas")[0],
ctx = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
var linearGradient = ctx.createLinearGradient(0,0,100,300),
radialGradient = ctx.createRadialGradient(300,200,0,
300,300,200);
linearGradient.addColorStop(0,"#000");
linearGradient.addColorStop(0.5,"#FFF");
linearGradient.addColorStop(1,"#000");
radialGradient.addColorStop(0,"#000");
radialGradient.addColorStop(0.5,"#FFF");