Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Filling Radial Gradient inside Canvas Shapes</title> <style> canvas { border: 1px solid #000; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.arc(150, 100, 70, 0, 2 * Math.PI, false); var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100); grd.addColorStop(0, '#8ED6FF'); grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> </body> </html>
