CAKE.js 弄っていたらテキストが描画されないバグに遭遇した

(2012/9/27 追記あり)
Canvas 処理ライブラリの CAKE.js 使っていたら、Chrome でテキスト描画されないバグに遭遇したのでメモ。

結論:これのComment#4のパッチを当てて回避すべし。

  • 2012/9/25 時点で trunk に置いてある cake.js (r76 by crgodsey on Jul 25, 2011)
  • Chrome 21 (正確にはChromium派生のIron21)

コード自体は次の通り単純なもの。「foobar」と描画されるはずがされない。

    var canvas = new Canvas(c);
    var t = new TextNode("foobar");
    t.x = 200;
    t.y = 200;
    canvas.append(t);

Issue 48 - cakejs - TextNode does not render correctly in Chrome - CAKE - Canvas Animation Kit Experiment - Google Project Hostingによると、 TextNode の描画部(6171行目あたり)がバグってるから、ちょろっと直せばOK。とのこと。これで描画されました。

If you replace line 6171

	ctx.fillText(this.text, this.cx, this.cy, this.maxWidth)

with this:

	if(this.maxWidth)
		ctx.fillText(this.text, this.cx, this.cy, this.maxWidth)
	else
		ctx.fillText(this.text, this.cx, this.cy);

it works again.

2012/9/27 追記 上のパッチだけだと TextNode.align と TextNode.baseline が反映されないので、以下のように。

 Comment 5 by ishak.nu...@gmail.com, Apr 5, 2012

here is drawHTML5 function with support for baseline, align and stroke:
  drawHTML5 : function(ctx) {
    ctx.textBaseline = this.baseline
    ctx.textAlign = this.align
    if(this.maxWidth) {
      if(this.stroke && this.strokeMode == 'below')
        ctx.strokeText(this.text, this.cx, this.cy, this.maxWidth)
      ctx.fillText(this.text, this.cx, this.cy, this.maxWidth)
      if(this.stroke && this.strokeMode == 'above')
        ctx.strokeText(this.text, this.cx, this.cy, this.maxWidth)
    }
    else {
      if(this.stroke && this.strokeMode == 'below')
        ctx.strokeText(this.text, this.cx, this.cy)
      ctx.fillText(this.text, this.cx, this.cy);
      if(this.stroke && this.strokeMode == 'above')
        ctx.strokeText(this.text, this.cx, this.cy)
    }
  },