SOURCE

<canvas id="myCanvas1" width="200" height="100">

</canvas >

<canvas id="myCanvas2" width="200" height="100">

</canvas >

<canvas id="myCanvas3" width="200" height="100">

</canvas >

<canvas id="myCanvas4" width="200" height="100">

</canvas >

<script type="text/javascript">

var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#000000");
grd.addColorStop(1,"#00FFFF");
cxt.moveTo(0,0);
cxt.lineTo(200,100);
cxt.stroke();
cxt.fillStyle=grd;
cxt.fillRect(0,0,200,100);

var c=document.getElementById("myCanvas2");
var cxt=c.getContext("2d");
cxt.moveTo(0,0);
cxt.lineTo(200,100);
cxt.stroke();
  
var c=document.getElementById("myCanvas3");
var cxt=c.getContext("2d");
cxt.fillStyle="#00FFFF";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
  
var c=document.getElementById("myCanvas4");
var cxt = c.getContext("2d");
  
</script>

canvas{
  border:1px solid #c3c3c3;
}