質問: タイトルの通りです。 オブジェクト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レイヤーにして重くならないのであれば助かるなといったところです。
回答: 処理の重さは私の経験則からいうと、canvasのピクセル数に比例して重くなります。 基本的に複数のcanvasをレイヤのように重ねるのはおすすめしません。ブラウザによって透過処理等の差が出てくる可能性もありますし... コードが複雑になると感じるのであれば、それはコードの組み方のほうが問題だと思います。 今後のために、jsのファイルの分け方、クラスの考え方等を勉強すべきかと思います。 また、先述のCreateJS等の便利なライブラリを使うことも考慮に入れると良いと思います。 変形や回転やアニメーション等、プレーンなJavascriptでcontextを使うよりかなり楽にインタラクティブ性を持たせることが出来ます。