これらのキャンバス要素をZ-インデックスでソートする方法は？

Question

これらのキャンバスを、一番大きなZ-インデックスを持つものにマージしたいと思います。

<div id="sketchpad_container"> 
    <canvas id="sketchypad_layer_0" style="z-index: 20; " width="800" height="600">Your browser does not support canvas</canvas> 
    <canvas id="sketchypad_layer_1" style="z-index: 10; " width="800" height="600">Your browser does not support canvas</canvas> 
    <canvas id="sketchypad_layer_2" style="z-index: 30; " width="800" height="600">Your browser does not support canvas</canvas> 
</div> 

私は、z-indexでソートするようにキャンバス層の任意の数を考えると、それをエクスポートするために、1枚の画像にそれらを結合するためにdrawImageメソッドを使用します。 z-indexでソートするのは簡単ですか？

EDIT - 私はソート機能を試してみましたが、うまくいかないようです。ここで

は私のコンソール出力です：私は間違っ

$("#sketchpad_container canvas"); //see what's in the collection 
//console output gives back (you'll notice z-indices are 40, 20, 10, 30) 
[ 
    <canvas id=​"sketchypad_interactive_layer" class=​"sketchypad_sketch_layer" style=​"z-index:​40" width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_0" class=​"sketchypad_sketch_layer" style=​"z-index:​ 20;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas class=​"sketchypad_sketch_layer" width=​"800" height=​"600">​, 
    <canvas id=​"sketchypad_layer_1" class=​"sketchypad_sketch_layer" style=​"z-index:​ 10;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_2" class=​"sketchypad_sketch_layer" style=​"z-index:​ 30;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​ 
] 

//next try to sort the collection 
$("#sketchpad_container canvas").toArray().sort(function(a,b){a.style.zIndex - b.style.zIndex}); 
//but array is still the same order of z-index 40, 20, 10, 30. 
// I was expecting 40,30,20,10 
[ 
    <canvas id=​"sketchypad_interactive_layer" class=​"sketchypad_sketch_layer" style=​"z-index:​40" width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_0" class=​"sketchypad_sketch_layer" style=​"z-index:​ 20;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas class=​"sketchypad_sketch_layer" width=​"800" height=​"600">​, 
    <canvas id=​"sketchypad_layer_1" class=​"sketchypad_sketch_layer" style=​"z-index:​ 10;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_2" class=​"sketchypad_sketch_layer" style=​"z-index:​ 30;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​ 
    ] 

何をしているのですか？

EDIT AGAIN - ああ、心配しないでください。私は "返品"声明を含める必要があります。ガー！

var items = $("#sketchpad_container canvas").toArray(); 
items.sort(function(a, b) { 
    return(Number(a.style.zIndex) - Number(b.style.zIndex)); 
}); 

あなたがすることができ、その後、おそらく：すべてのあなたのcanvas要素は、そのZインデックスを設定し、割り当てられたスタイルの値を持っている、あなたはこのようなZインデックスによってソートされたすべてのcanvas要素の配列を取得することができますと仮定

Answer 1

各配列のdrawImage()を呼び出す配列を反復処理します。正しいzオーダーレンダリングのためには、最初のバックイメージ（z値の最も小さいアイテム）を上に並べて、上のソートごとに配列の先頭から最後まで描画することを意味します。