File upload dialog box not displaying onclick first time
That happens when you click on the first figure and then on the second (overlapped part), then the pixel is not white
but transparent
, that's why you do not see the file manager.
What I suggest here is use single image/canvas and in addition to checking color pixel under the cursor also check the position of the click (minus position of the image). In this case, you'll be able to create any logic you want.
One more solution with keeping layout as it is now, is to check not e.target
(i.e. element that was clicked), but all applicable (all which's bounding box is applicable for click position) canvases:
$('.container').click(function(e) {
// filtering out non-canvas clicks
if (e.target.tagName !== 'CANVAS') return;
// getting absolute points relative to container
const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;
const $canvasList = $(this).find('canvas');
// moving all canvas parents on the same z-index
$canvasList.parent().css({zIndex: 0});
$canvasList.filter(function() { // filtering only applicable canvases
const bbox = this.getBoundingClientRect();
const canvasTop = bbox.top + window.scrollY;
const canvasLeft = bbox.left + window.scrollX;
return (
absX >= canvasLeft && absX <= canvasLeft + bbox.width &&
absY >= canvasTop && absY <= canvasTop + bbox.height)
}).each(function () { // checking white in a click position
const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
if (pixel[3] === 255) {
$(this).parent().css({zIndex: 2})
target = this.id;
console.log(target);
setTimeout(() => {
$('#fileup').click();
}, 20);
}
})
});