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









