console
var c = document.getElementById('myCanvas');
var cvs = c.getContext('2d');
cvs.fillStyle="#FF0000";
cvs.fillRect(0,0,200,75);
var c1 = document.getElementById('myCanvas1');
var cvs1 = c1.getContext('2d');
cvs1.moveTo(0,0);
cvs1.lineTo(200,100);
cvs1.stroke();
var c2 = document.getElementById('myCanvas2');
var cvs2 = c2.getContext('2d');
cvs2.beginPath();
cvs2.arc(95,50,40,0,2*Math.PI);
cvs2.stroke();
var c3 = document.getElementById('myCanvas3');
var cvs3 = c3.getContext('2d');
var grd = cvs3.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
cvs3.fillStyle=grd;
cvs3.fillRect(10,10,200,80);
var c4 = document.getElementById('myCanvas4');
var cvs4 = c4.getContext('2d');
var grd1 = cvs4.createRadialGradient(75,50,5,90,60,100);
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"white");
cvs4.fillStyle=grd1;
cvs4.fillRect(10,10,200,80);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid grey"></canvas>
<canvas id="myCanvas1" width="200px" height="100px" style="border:1px solid grey"></canvas>
<canvas id="myCanvas2" width="200px" height="100px" style="border:1px solid grey"></canvas>
<canvas id="myCanvas3" width="200px" height="100px" style="border:1px solid grey"></canvas>
<canvas id="myCanvas4" width="200px" height="100px" style="border:1px solid grey"></canvas>
</body>
</html>