javascript - Having trouble selecting id of a shape from a group using Kinetic shape? -

i'm having trouble selecting shape group using id. codepen: http://codepen.io/drixta/pen/ainhl

here's code creating square:

function create_square(posr,posc,state,len){ var square = new kinetic.rect({     id : "sqr"+ posr + "," + posc,     posr: posr,     posc: posc,     state : state,     x: posr*len,     y: posc*len,     width: len,     height: len,     stroke: 'black',     strokewidth: 2,     fill: 'white' }); console.log(square.attrs.id); squaregroup.add(square); } 

from here works fine. console printout id of every square.

sqr0,0 javascript.js:44 sqr0,1 javascript.js:44 sqr0,2 javascript.js:44 sqr0,3 javascript.js:44 sqr0,4 javascript.js:44 sqr0,5 javascript.js:44 sqr0,6 javascript.js:44 sqr0,7 javascript.js:44 

however, according site: http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shape-by-id-with-kineticjs/

i tried using console.log((squaregroup.get('#sqr0,0')[0]).attrs.id) @ end of program, says cannot attrs of undefined . assumed doesn't work.

thank !

ps: code highlighting boxes:

square.on("mouseover", function(){ square.setfill('blue'); layer.draw(); }); square.on("mouseout", function(){ square.setfill('white'); layer.draw(); }); 

i nested in create_square function , extremely slow , unresponsive when number of box increases, know better?

your example works no problem on chrome.

to increase perfomance. problem here:

square.on("mouseover", function(){ square.setfill('blue');     layer.draw(); }); square.on("mouseout", function(){     square.setfill('white'); layer.draw(); }); 

you call layer.draw() twice - slow. can this:

square.on("mouseover", function(){     square.setfill('blue'); }); square.on("mouseout", function(){     square.setfill('white');     settimeout(function(){layer.draw();}); });