I want to merge these canvas into one with the largest z-index on top.
<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>
Given an arbitrary number of such canvas layers I want to sort by the z-index and then use drawImage to bine them into one image in order to export it. Is there an easy by to sort by z-index?
EDIT - I tried the sort function as suggested but doesn't seem to work.
Here is my console output:
$("#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>
]
What am I doing wrong?
EDIT AGAIN -- oh nevermind. I need to include a "return" statement. gah!
I want to merge these canvas into one with the largest z-index on top.
<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>
Given an arbitrary number of such canvas layers I want to sort by the z-index and then use drawImage to bine them into one image in order to export it. Is there an easy by to sort by z-index?
EDIT - I tried the sort function as suggested but doesn't seem to work.
Here is my console output:
$("#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>
]
What am I doing wrong?
EDIT AGAIN -- oh nevermind. I need to include a "return" statement. gah!
Share Improve this question edited Jan 11, 2012 at 17:18 Homan asked Jan 11, 2012 at 5:01 HomanHoman 26.8k22 gold badges72 silver badges112 bronze badges1 Answer
Reset to default 9Assuming all your canvas elements have an assigned style value that sets their z-index, you can get an array of all the canvas elements sorted by z-index like this:
var items = $("#sketchpad_container canvas").toArray();
items.sort(function(a, b) {
return(Number(a.style.zIndex) - Number(b.style.zIndex));
});
You can then presumably iterate through that array calling drawImage() on each. For proper z order rendering, you will want to draw the back images first (the lowest z-index items) which per the sort above will mean you draw from the beginning of the array to the end.