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>