F-gradients

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>colour gradients</title>
</head>

<body>

   <canvas id="myCanvas" width="700" height="300" style="boarder:1px solid black";>
</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var dt =canvas.getContext("2d");
//create linear gradient
var lineGrd = dt.createLinearGradient(20,20,20,300);
  //add some colour stops
lineGrd.addColorStop(0,"red");//start with red at top
lineGrd.addColorStop(0.5,"blue");//place this at halfwaypoint
lineGrd.addColorStop(1,"green");//finish with cyan


    //create a rectange and fill with linear gradient
    dt.fillStyle = lineGrd;
    dt.fillRect(20,20,200,260);
    dt.lineWidth = 3;
    dt.strokeRect(20,20,200,260);

//create a radial gradient
    var radGrd = dt.createRadialGradient(525,150,20,525,150,100);
    radGrd.addColorStop(0,"#f00");
    radGrd.addColorStop(0.5,"#00f");
    radGrd.addColorStop(1,"#0f0");

    //create a circle and fill with rad grd
    dt.fillStyle = radGrd;
    dt.beginPath();
    dt.arc(525,150,100,0,2*Math.PI);
    dt.stroke();
    dt.fill();


</script>
</body>

</html>