Canvas Box Shadow: Heart shape

HTML

<!-- HTMLファイルです。canvasを作ります。絵はcanvasで書きます。-->
<canvas id=myCanvas width=400 height=400 style="border:1px solid #000">
</canvas>

JavaScript

var W = 400;
var H = 400;
var Sin = Math.sin;
var Cos = Math.cos;

with(document.getElementById('myCanvas').getContext('2d')) {



  beginPath();
  strokeStyle = "#ff0000"; // 赤い色を使う

  for (var i = 0; i < 360; i++) {
    // ポイントの座標を計算する
    // ハート実は360の線で描かされます
    var r = i / 360 * Math.PI * 2;
    var x = W / 2 + 180 * Math.pow(Sin(r), 3);
    var y = H / 2 + 10 * (-(15 * Cos(r) - 5 * Cos(2 * r) - 2 * Cos(3 * r) - Cos(4 * r)));
    lineTo(x, y); //　前のポイントから今のポイント（x、y）まで線を描く
  }

  stroke(); //　書きます

  closePath();

  // canvas真ん中でサイズ100x100の青い四角形を描きたいなら
  beginPath();
  strokeStyle = "#00ff00";
  lineTo(W / 2 - 50, H / 2 + 50);
  lineTo(W / 2 + 50, H / 2 + 50);
  lineTo(W / 2 + 50, H / 2 - 50);
  lineTo(W / 2 - 50, H / 2 - 50);
  lineTo(W / 2 - 50, H / 2 + 50);
  stroke();
  closePath();

}