Layer management


red Up | red Down | red Top | red Bottom
green Up | green Down | green Top | green Bottom
blue Up | blue Down | blue Top | blue Bottom

Code

<canvas id="canvas" height="200" width="400" style="background: rgba(0,0,0,0.8);"></canvas>
<script type="text/javascript">
var c = new cajal('canvas');

var shape = new cajal.Rect(100,100,50,50);
c.add('red', shape.clone().options({fill:'red'}))
 .add('green', shape.clone().moveBy(5,30).options({fill:'green'}))
 .add('blue', shape.clone().moveBy(30,5).options({fill:'blue'}))
 .draw();

window.itemUp = function(item) {
    c.up(item).draw();
    return false;
};
window.itemDown = function(item) {
    c.down(item).draw();
    return false;
};
window.itemTop = function(item) {
    c.top(item).draw();
    return false;
};
window.itemBottom = function(item) {
    c.bottom(item).draw();
    return false;
};
</script><br/>
<a href="#" onclick="return itemUp('red');">red Up</a> |
<a href="#" onclick="return itemDown('red');">red Down</a> |
<a href="#" onclick="return itemTop('red');">red Top</a> |
<a href="#" onclick="return itemBottom('red');">red Bottom</a><br/>
<a href="#" onclick="return itemUp('green');">green Up</a> |
<a href="#" onclick="return itemDown('green');">green Down</a> |
<a href="#" onclick="return itemTop('green');">green Top</a> |
<a href="#" onclick="return itemBottom('green');">green Bottom</a><br/>
<a href="#" onclick="return itemUp('blue');">blue Up</a> |
<a href="#" onclick="return itemDown('blue');">blue Down</a> |
<a href="#" onclick="return itemTop('blue');">blue Top</a> |
<a href="#" onclick="return itemBottom('blue');">blue Bottom</a>