Heart

var canvaswidth = 800
var canvasheight = 600

//rectangle
context.beginPath();
context.rect(0, 0, canvaswidth, canvasheight);
  var grd = context.createLinearGradient(400, 0, 400, 600);
        // light
        grd.addColorStop(0, 'rgb(153,255,255)');
        // dark
        grd.addColorStop(1, 'rgb(0,153,153)');
        context.fillStyle = grd;
        context.fill();
context.stroke();




var x = 400;
var y = 200;
var controlX1 = 300;
var controlY1 = 0;
var controlX2 = 100;
var controlY2 = 200;
var endX = 250;
var endY = 325;
var controlX = 380;
var controlY = 400;
var endX2 = 400;
var endY2 = 500;
var controlX3 = 435;
var controlY3 = 400;
var endX3 = 550;
var endY3 = 325;
var controlX4 = 700;
var controlY4 = 200;
var controlX5 = 500;
var controlY5 = 0;
var endX4 = 400;
var endY4 = 200;

context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX, controlY, endX2, endY2);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.bezierCurveTo(controlX4, controlY4, controlX5, controlY5, endX4, endY4);
context.fillStyle = 'rgb(255, 51, 102)';
  context.fill();
context.lineWidth = 9;
context.lineCap = 'round'
context.strokeStyle = 'pink'
context.stroke();