Just in case anyone might be interested in the solution. I found when using draggable and resizable, this adds two layer so by changing the children[0] to children[3] it worked.
var wrapper_div = document.getElementById('container1');
var kinetic_div = wrapper_div.children[3];
canvaso = kinetic_div.children[0];
canvaso.setAttribute('id', "panel1");
context = canvaso.getContext('2d');