HTML5 Canvasにベジエでトランプのマークを書くJS

ベジエの例は、ハートマーク以外はあまりみないのでスペードやクローバーも書いてみました。HTML5 canvas 2dの場合、Text APIでUnicodeの♡♢♤♧をつかうという手もありますね。

• ソース: https://gist.github.com/812485
• デモ: http://dl.dropbox.com/u/14499563/bezier/usage.html

図形データは、各ベジエ曲線[始点, 始点の制御点, 終点の制御点, 終点]の配列で半分だけ用意し、連続で書くようにしています。連続描画させるので終点と次の始点は同じになります。