The following code fragment provides a method to draw a heart shape within given rectangle region.

//
//        (x,y) - the top left corner of the surrounding rectangle
// width,height - the size of the surrounding rectangle
function drawHeart(canvas,x,y,width,height){
   var x0 = x + 0.5 * width, y0 = y + 0.3 * height;
   var x1 = x + 0.1 * width, y1 = y + 0.0 * height;
   var x2 = x + 0.0 * width, y2 = y + 0.6 * height;
   var x3 = x + 0.5 * width, y3 = y + 0.9 * height;
   var x4 = x + 1.0 * width, y4 = y + 0.6 * height;
   var x5 = x + 0.9 * width, y5 = y + 0.0 * height;

   var ctx = canvas.getContext("2d");
   ctx.save();

   ctx.beginPath();

   ctx.moveTo(x0,y0);
   ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);
   ctx.bezierCurveTo(x4,y4,x5,y5,x0,y0);

   ctx.stroke();

   ctx.restore();
}

To see this code in action, you can check out http://www.jswidget.com/ipaint.html