<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

context.beginPath();
context.moveTo(280,207);
context.bezierCurveTo(303,220,305,400,320,500);
context.bezierCurveTo(370,520,410,520,460,500);
context.bezierCurveTo(480,400,497,210,523,207);
context.lineTo(525,205)
context.bezierCurveTo(475,225,325,225,275,205);
context.lineTo(280,207);
context.closePath();

context.strokeStyle = "rgb(150,0,0)";
context.stroke();

//////

var grd = context.createLinearGradient(280, 0, 525, 25);
grd.addColorStop(0, 'rgb(255,0,0)');
grd.addColorStop(0.8, 'rgb(100,0,0)');

grd.addColorStop(1, 'rgb(255,0,0)');

context.fillStyle = grd;
context.fill();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>