console
window.onload=function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
this.width = canvas.width;
this.height = canvas.height;
ctx.beginPath();
ctx.moveTo(90, 50);
ctx.quadraticCurveTo(190, 0, 300, 10);
ctx.lineWidth=15;
var gnt1 = ctx.createLinearGradient(0,0,400,300);
gnt1.addColorStop(0.5,'rgba(3,131,254, 0)');
gnt1.addColorStop(0,'rgba(3,131,254, 1)');
gnt1.addColorStop(1,'rgba(3,131,254, 1)');
ctx.strokeStyle = gnt1;
ctx.lineCap='round';
ctx.stroke();
ctx.closePath();
}
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 2;
ctx.strokeStyle = "#B7E0FF";
ctx.beginPath();
ctx.setLineDash([2, 9]);
ctx.moveTo(35, 76);
ctx.quadraticCurveTo(260, 99, 323, 255);
ctx.lineCap='round';
ctx.stroke();
<html>
<head></head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
#canvas{
background: rgb(241, 217, 217);
}