2通りの図形の描き方

enchant.js、もとい、JavaScriptでは、図形ひとつ書くにもいろいろ方法があるみたいです。

今のところ、下記2通り確認しました。

①enchant.jsを利用する

「ゼロからはじめるenchant.js入門」に載っていたサンプルはこちらの方法で描画していました。

ソースコードと実行環境※オンラインでソースの閲覧と実行ができます
SurfaceEx - jsdo.it - Share JavaScript, HTML5 and CSS

②JavaScriptのcanvasを利用

JavaScript使いの方が書いていたコードです。
enchant.js: Step1 – スプライトを表示してみよう! | TM Life

ソースコードと実行環境※オンラインでソースの閲覧と実行ができます
enchant.js: Step1 – スプライトを表示してみよう! forked: 雛形 - jsdo.it - Share JavaScript, HTML5 and CSS

どう違うか

①enchant.jsを利用する
プロトタイプを使っている
描画処理の基本がシンプル

②JavaScriptのcanvasを利用
クラスやコンストラクタなどの概念もコミで描画しようとしている
単純に描画するだけなのに複雑に見える
（拡張性等考慮するとこちらのほうがよいのか？）

私見

本に載っていた①のほうがシンプルで初心者にはわかりやすく感じました。
canvasでやる方法のほうは、クラスの継承、初期化は不要なのでは？と思いました。
canvasでやる方法（下記ブログで示されている方法）は、JavaScriptの知識が不足している自分にはまだわかりづらいので、本にのっている方法で同じ処理を行うようなコードを書いてみることにします。
enchant.js: Step1 – スプライトを表示してみよう! | TM Life