Hearts Pump

This was my first ever project on HTML 5. I was cool to see how a "simple" could can create something like this heart. It definitely takes a lot to create something on HTML 5 but this is a great first assignment to take me into my project. 

//Box
var x = 0;
var y = 0;
var width = 700;
var height = 600;
var grdstartx = 175;
var grdstarty = 125;
var grdendx = 525;
var grdendy = 410;

context.beginPath();
context.rect(x, y, width, height);
var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);
grd.addColorStop(0, 'rgb(100, 0, 150)');
grd.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();

//Top Left
var startx = 300;
var starty = 200;
var controlx1 = 200;
var controly1 =  50;
var controlx2 = 3;
var controly2 = 200;
var endx1 = 200;
var endy1 = 350;

//Bottom Left
var controlx3 = 300;
var controly3 = 410;
var endx2 = 350;
var endy2 = 500;

//Bottom Right
var controlx4 = 375;
var controly4 = 410;
var endx3 = 450;
var endy3 = 325;

//Top Right
var controlx5 = 575;
var controly5 = 200;
var controlx6 = 400;
var controly6 = 50;

//Heart
context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx1, endy1);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, startx, starty);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'rgb(200, 0, 0)';
context.fill();
context.stroke();