Canvas createRadialGradient API
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>createRadialGradient</title> </head> <body> <canvas id='myCanvas' width='800' height='600'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var grd = ctx.createRadialGradient(100, 100, 10, 100, 100, 100); grd.addColorStop(0, '#00ff00'); grd.addColorStop(1, '#ff0000'); ctx.fillStyle = grd; ctx.fillRect(0, 0, 200, 200); </script> </body> </html>