Canvas Gradients

by Arjan Haverkamp

HTML

<!DOCTYPE html>
<html>
<body>
<canvas width="400" height="600" id="c"></canvas>
</body>
</html>

JavaScript

var cw = 400, ch = 600;
var canvas = $('#c')[0];
var ctx = canvas.getContext('2d'), gradient;

gradient = ctx.createRadialGradient(
	cw/2, // x start circle
  ch/2, // y start circle
  1, // radius start circle
  cw/2, // x end circle
  ch/2, // y end circle
  Math.min(ch,cw)// radius end circle
);
gradient.addColorStop(0.1, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(0.9, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, cw, ch);

var centerX = cw / 2;
var centerY = ch / 2;
var radius = Math.min(cw,ch)/2;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.strokeWidth = 1;
ctx.strokeStyle = '#003300';
ctx.stroke();


/* 
left:
gradient = ctx.createRadialGradient(0, ch/2, 1, 0, ch/2, cw);

right:
gradient = ctx.createRadialGradient(cw, ch/2, 1, cw, ch/2, cw);

top:
gradient = ctx.createRadialGradient(cw/2, 0, 1, cw/2, 0, ch);

bottom:
gradient = ctx.createRadialGradient(cw/2, ch, 1, cw/2, ch, ch);

*/