cocos2d-js で多角形をレンダリングする

多角形を表示する際には DrawNodeCanvas あるいは DrawNodeWebGL を用いる．

ドキュメント DrawNodeCanvas DrawNodeWebGL

ここでは DrawNodeCanvas を用いる．

下記コードは http://qiita.com/nise_nabe/items/2271296bf24584e74a13 からの差分．

内容

コード片

src/myApp.js を下記のように書く． DrawNodeCanvas の drawPoly() を用いるために cc.Point の配列を作る．この配列の内容にしたがってパスが記述される

var MyLayer = cc.Layer.extend({
    init:function () {
        this._super();
        var size = cc.Director.getInstance().getWinSize();

        var polygon = new cc.DrawNodeCanvas();
        var points = [ 
            new cc.Point(0, 0), 
            new cc.Point(200, 0), 
            new cc.Point(200, 200),
        ];  
        polygon.drawPoly(points);
        this.addChild(polygon);
    }   
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});

DrawNodeCanvas を使った場合に Uncaught TypeError: undefined is not a function というエラーが出るため ctx.beginPath() がないというエラーが出る場合がある．

エラー箇所

bower_components/cocos2d-html5/cocos2d/shape_nodes/CCDrawNode.js
499         ctx.beginPath();

その場合は cocos2d.js で renderMode を 1 (Canvas only) にすれば動いた．
0 の場合でも動くものがあるので何らかの条件で Default の設定が影響している？

diff --git a/cocos2d.js b/cocos2d.js
index 344ebf6..cc83864 100644
--- a/cocos2d.js
+++ b/cocos2d.js
@@ -33,7 +33,7 @@
         showFPS:true,
         loadExtension:false,
         frameRate:60,
-        renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
+        renderMode:1,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
         tag:'gameCanvas', //the dom element to run cocos2d on
         engineDir:'bower_components/cocos2d-html5/cocos2d/',
         //SingleEngineFile:'',

うまく動くと下記のように表示される．