Radial Gradients

HTML5 canvas demos

HTML

<canvas id="myCanvas" width="300" height="300" />

JavaScript

var ctx, canvas, centerX, centerY, radius;
var borderColor = '#c8c8c8';
var innerBorderColor = '#c8c8c8';
var handColor = '#666666';

$(document).ready(function() {
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    centerX = canvas.width/2;
    centerY = canvas.height/2;
    radius = canvas.width/3;
    
    drawOuterGradient();   
    drawInnerGradient();
});

function drawOuterGradient() {
    ctx.beginPath();
    ctx.strokeStyle = borderColor;
    ctx.arc(centerX, centerY/1.2, radius, 0, 2 * Math.PI, false);
    var gradient= ctx.createRadialGradient(centerX,centerY/1.2,
                  radius,100,50,radius/2);
    gradient.addColorStop(0.5, '#ccc');
    gradient.addColorStop(1, '#fff');
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();   
}

function drawInnerGradient() {
    ctx.beginPath();
    var gradient= ctx.createRadialGradient(centerX,centerY/1.2,radius,
                   0,0,radius);
    gradient.addColorStop(0, '#88bfe8');
    gradient.addColorStop(1, '#fff');
    ctx.fillStyle = gradient;
    ctx.arc(centerX, centerY/1.2, radius - 10, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.strokeStyle = innerBorderColor;
    ctx.stroke();
    ctx.closePath();
}