Canvas How to - Draw Heart shape

Question

We would like to know how to draw Heart shape.
Answer


<!-- ww w.j  a  v a2 s.  c o m-->




<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.x = 150;
    canvas.y = 150;
    var w = 200, h = 200;
    context.strokeStyle = "#000000";
    context.strokeWeight = 3;
    context.shadowOffsetX = 4.0;
    context.shadowOffsetY = 4.0;
    context.lineWidth = 10.0;
    context.fillStyle = "#FF0000";
    var d = Math.min(w, h);
    var k = 120;
    context.moveTo(k, k + d / 4);
    context.quadraticCurveTo(k, k, k + d / 4, k);
    context.quadraticCurveTo(k + d / 2, k, k + d / 2, k + d / 4);
    context.quadraticCurveTo(k + d / 2, k, k + d * 3/4, k);
    context.quadraticCurveTo(k + d, k, k + d, k + d / 4);
    context.quadraticCurveTo(k + d, k + d / 2, k + d * 3/4, k + d * 3/4);
    context.lineTo(k + d / 2, k + d);
    context.lineTo(k + d / 4, k + d * 3/4);
    context.quadraticCurveTo(k, k + d / 2, k, k + d / 4);
    context.stroke();
    context.fill();
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas" width="400" height="400" x="50" y="30"></canvas>
</body>
</html>
The code above is rendered as follows: