canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった

最近、ブログを書いて、毎回、読んだくださった方から、貴重な情報を教えてもらっています。大変ありがとうございます。

ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaのブログですが、コメント欄＆http://www.revulo.com/blog/20100311.html#p01によると、drawImage()で渡す座標は、仕様上 "float" となっているのですが、ここに "int" を渡すと高速化するそうです。具体的には、Math.random() * 750 を Math.random() * 750 | 0 にします。"| 0"で、float → int です。

また、FlashCanvas Pro は今、1.2 α3 ですが、1.2になって、高速化したので（上のブログ参照）、それを含めてテストしてみました。

ブラウザ	時間	高速化の速度比
Chrome 4.1β	733ms	1.0倍
Safari 4.0.5	879ms	4.6倍
Opera 10.50	1,268ms	4.0倍
Firefox 3.6.0	1,417ms	8.1倍
FlashCanvas Pro 1.2 α3	1,864ms	4.3倍
uuCanvas.js 2.02	8,224ms	1.4倍

FlashCanvas 自体は、1.1→1.2による高速化を含み、それの要因が、ほとんどだと思います。

ベンチマークのアドレスはここ。

ところで、座標に float を受け付けて、どうするつもりなのでしょうか？ズームした時に差が出る？アンチエイリアス関係あるの？？

あと、setTimeout() で、フレームを次に進める話において、setTimeout に渡す数字が 0ms では、ちゃんと描画しない問題ですが、FlashCanvas Pro では、どうも、最初の2フレームだけ、飛んでしまうようで、setTimeout(doBenchInner, k <= 2 ? 100 : 0); とやると、全てのフレーム描画されるようになります。なんでなんでしょう？

drawImage の座標が float であるという情報は、4.8.10.1 The 2D context - 4.8.10 The canvas element ― HTML5 (including next generation additions still in development)より。ImageDataの大きさは、unsigned longですが、座標系は全て float です。

2010年の夏くらいに、WebGL がウェブブラウザで実装されるのではないかと思うのですが、それに合わせて、誰かが WebGL on Flash 10 を作ったら、すご〜〜く嬉しいです！

(追記)won't fix: canvasベンチというレスのような記事を見つけました。Firefox 3.7 (まだ未リリース)についてです。