Canvas Color Picker Doesn't Work if its Child Element

Canvas Color Picker Doesn't Work if its Child Element

I want to create color picker with pop up method. The canvas element are
child element of several tags. then I'll show it use fadeIn(); But my
color picker doesn't work. If I put the canvas outside other elements, the
picker is working.
here is code
<div class="DADcolorCanvas">
<div class="DADcolOption">Invert</div>
<div class="DADcolOption"></div>
<div class="DADcolOption"></div>
<input type="text" class="DADcolorValue" value="000000"/>
<div class="DADcolClose"></div>
<canvas width="256" height="256" id="DADcolorCanvas"></canvas>
</div>
many parents object of these code. using position relative and absolute.
and here the scripts
var DADcolorCan=document.getElementById("DADcolorCanvas").getContext("2d");
var DADmapCol=new Image();
DADmapCol.src="DADmedia/DADcolors.jpg";
DAD(DADmapCol).load(function(){DADcolorCan.drawImage(DADmapCol,0,0);});
function DADgetRGB(DADcR,DADcG,DADcB){
return DADgetHex(DADcR)+DADgetHex(DADcG)+DADgetHex(DADcB)
}
function DADgetHex(DADcolN){
DADcolN=parseInt(DADcolN,10);
if(isNaN(DADcolN))return "00";
DADcolN=Math.max(0,Math.min(DADcolN,255));
return "0123456789ABCDEF".charAt((DADcolN-DADcolN%16)/16) +
"0123456789ABCDEF".charAt(DADcolN%16);
}
DAD("#DADcolorCanvas").click(function(event){
var DADcolX=event.pageX - this.offsetLeft;
var DADcolY=event.pageY - this.offsetTop;
var DADcolDat = DADcolorCan.getImageData(DADcolX,DADcolY,1,1).data;
var DADcR=DADcolDat[0];
var DADcG=DADcolDat[1];
var DADcB=DADcolDat[2];
var DADrgbResult=DADcR+","+DADcG+","+DADcB;
var DADhexResult=DADgetRGB(DADcR,DADcG,DADcB);
DAD(".DADcolorValue").val(DADhexResult).css({
"background-color":"#"+DADhexResult,
"color":"#"+DADinvertCol(DADhexResult)
});
});
If I move this canvas code
<canvas width="256" height="256" id="DADcolorCanvas"></canvas>
to outside all codes, the color picker is working.
I don't know where the problem. Then I'll try keep the canvas code outside
other divs. The color picker is still working. I create function
appendTo() so the canvas move iside of:
<div class="DADcolorCanvas">
But now the color picker not working again. and I move canvas element
before body section if pop up closed. Now, picker working. But not working
if the canvas is child element. I don't know where the problem.. Sorry for
my poor English... I can't speak English fluently...