canvas上に描画する量が同じで、canvasを複数に分けた時重くなりますか？

Question

タイトルの通りです。

オブジェクトA、B、Cとあって、1canvasに描画するのと
3canvasあって、canvasAにオブジェクトA、canvasBにオブジェクトB、canvasCにオブジェクトCとするのとではcanvasが増えた分重くなりますか？

もし重くなる場合、それは体感するほどに重くなりますか？

質問意図は、今少ないcanvas数で作っていますが、複数にわけたほうが作りやすいのです。
ですが、あまりわけすぎると重くなるかな？と。

以上、よろしくお願いします。

---

14:45追記
失礼しました。
プレーンなJavascriptです。
canvasサイズはスクリーンの大きさによって可変ですが、基本はw:656 h:496です。
複数canvasをレイヤーとして重ねて1枚のcanvasのようにふるまわせるつもりです。
更に具体的に書きますと、現状既に4レイヤー使っており、それを8レイヤーにして重くならないのであれば助かるなといったところです。

Comments

[masaya_ohashi]

プレーンなJavascriptで描画するだけなのか、CreateJS等のなんらかのAPIを使って描画するのか、1枚のcanvasでやる際の大きさ、複数のcanvasでやる際の1枚の大きさ等細かく書いてみてください。

Answer 1

処理の重さは私の経験則からいうと、canvasのピクセル数に比例して重くなります。
基本的に複数のcanvasをレイヤのように重ねるのはおすすめしません。ブラウザによって透過処理等の差が出てくる可能性もありますし…

コードが複雑になると感じるのであれば、それはコードの組み方のほうが問題だと思います。
今後のために、jsのファイルの分け方、クラスの考え方等を勉強すべきかと思います。

また、先述のCreateJS等の便利なライブラリを使うことも考慮に入れると良いと思います。
変形や回転やアニメーション等、プレーンなJavascriptでcontextを使うよりかなり楽にインタラクティブ性を持たせることが出来ます。
http://www.createjs.com/

Comments

[fundidididi]

回答ありがとうございます。
canvasはなにぶん初めてでして、オブジェクトの重なりに苦戦していて、レイヤーで逃げようとしている次第でありますｗ
今回作成物に関してはこのままいきますが、次回からはCreateJSやその他もろもろ検討したいと思います。
ありがとうございました。