<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); var grad=canvas.createLinearGradient(0,0,500,500); grad.addColorStop(0.2,"red"); grad.addColorStop(0.5,"orange"); grad.addColorStop(1,"yellow"); canvas.fillStyle=grad; canvas.fillRect(0,0,500,500); </script> <canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); var grad=canvas.createRadialGradient(0,0,10,500,500,100); grad.addColorStop(0.2,"red"); grad.addColorStop(0.5,"orange"); grad.addColorStop(1,"yellow"); canvas.fillStyle=grad; canvas.fillRect(0,0,500,500); </script>
