Display icons only on mask images

var target;
    var imageUrl = "https://i.imgur.com/As37YCl.png";

    let jsonData = {
        "layers" : [
            {
                "x" : 0,
                "height" : 788,
                "layers" : [
                    {
                        "x" : 0,
                        "height" : 788,
                        "src" : "lRtZPoj.jpg",
                        "y" : 0,
                        "width" : 940,
                        "type" : "image",
                        "name" : "bg_image"
                    }
                ],
                "y" : 0,
                "width" : 940,
                "type" : "group",
                "name" : "fb_post_5"
            }
        ]
    };

    $(document).ready(function() {

        // upload image onclick

        $('.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()
                return (
                    absX >= bbox.left && absX <= bbox.left + bbox.width &&
                    absY >= bbox.top && absY <= bbox.top + 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);
                }
            })
        });


        function getAllSrc(layers) {
            let arr = [];
            layers.forEach(layer => {
                if (layer.src) {
                    arr.push({
                        src: layer.src,
                        x: layer.x,
                        y: layer.y,
                        name: layer.name
                    });
                } else if (layer.layers) {
                    let newArr = getAllSrc(layer.layers);
                    if (newArr.length > 0) {
                        newArr.forEach(({
                                            src,
                                            x,
                                            y,
                                            name
                                        }) => {
                            arr.push({
                                src,
                                x: (layer.x + x),
                                y: (layer.y + y),
                                name: (name)
                            });
                        });
                    }
                }
            });
            return arr;
        }

        function json(data)

        {
            var width = 0;
            var height = 0;

            let arr = getAllSrc(data.layers);

            let layer1 = data.layers;
            width = layer1[0].width;
            height = layer1[0].height;
            let counter = 0;
            let table = [];

            for (let {
                src,
                x,
                y,
                name
            } of arr) {
                $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
                if(name.indexOf('bg_image') == -1){
                    var imageUrl1 = imageUrl;
                }else{
                    var imageUrl1 = '';
                }
                var mask = $(".container").mask({
                    imageUrl: imageUrl1,
                    maskImageUrl: 'https://i.imgur.com/' + src,
                    onMaskImageCreate: function(img) {

                        img.css({
                            "position": "absolute",
                            "left": x + "px",
                            "top": y + "px"
                        });

                    },
                    id: counter
                });
                table.push(mask);
                fileup.onchange = function() {

                    let mask2 = table[target];
                    mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                    document.getElementById('fileup').value = "";
                };
                counter++;
                // get the text

            }
            drawText(data);
        }

        json(jsonData);
    }); // end of document ready


    // extempl code - get the text

    const fonts = []; // caching duplicate fonts

    function drawText(layer) {

        if (layer.type === 'image') return;

        if (!layer.type || layer.type === 'group') {
            return layer.layers.forEach(drawText)
        }

        if (layer.type === 'text') {
            const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;

            if (!fonts.includes(url)) {
                fonts.push(url);
                $("style").prepend("@font-face {\n" +
                    "\tfont-family: \"" + layer.font + "\";\n" +
                    "\tsrc: url(" + url + ") format('truetype');\n" +
                    "}");
            }

            $('.container').append(
                '<div class="txtContainer" ' +
                'style="' +
                'text-align: ' + layer.justification + '; ' +
                'font-family: ' + layer.font + '; ' +
                'left: ' + layer.x + 'px; ' +
                'top: ' + layer.y + 'px; ' +
                'width:' + layer.width + 'px; ' +
                'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
                'font-size: ' + layer.size + 'px; ' +
                'height:' + layer.height + 'px;' +
                '">' +
                layer.text +
                '</div>');
        }

    }
    // extempl code end



    // jq plugin

    (function($) {
        var JQmasks = [];
        $.fn.mask = function(options) {
            // This is the easiest way to have default options.
            var settings = $.extend({
                // These are the defaults.
                maskImageUrl: undefined,
                imageUrl: undefined,
                scale: 1,
                id: new Date().getUTCMilliseconds().toString(),
                x: 0, // image start position
                y: 0, // image start position
                onMaskImageCreate: function(div) {},
            }, options);


            var container = $(this);

            let prevX = 0,
                prevY = 0,
                draggable = false,
                img,
                canvas,
                context,
                image,
                timeout,
                initImage = false,
                startX = settings.x,
                startY = settings.y,
                div;

            container.mousePosition = function(event) {
                return {
                    x: event.pageX || event.offsetX,
                    y: event.pageY || event.offsetY
                };
            }

            container.selected = function(ev) {
                var pos = container.mousePosition(ev);
                var item = $(".masked-img canvas").filter(function() {
                    var offset = $(this).offset()
                    var x = pos.x - offset.left;
                    var y = pos.y - offset.top;
                    var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
                    return d[0] > 0
                });

                JQmasks.forEach(function(el) {
                    var id = item.length > 0 ? $(item).attr("id") : "";
                    if (el.id == id)
                        el.item.enable();
                    else el.item.disable();
                });
            };

            container.enable = function() {
                draggable = true;
                $(canvas).attr("active", "true");
                div.css({
                    "z-index": 2
                });
            }

            container.disable = function() {
                draggable = false;
                $(canvas).attr("active", "false");
                div.css({
                    "z-index": 1
                });
            }

            container.onDragStart = function(evt) {
                if (evt.target.getContext) {
                    var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;

                    $(canvas).attr("active", "true");
                    container.selected(evt);
                    prevX = evt.clientX;
                    prevY = evt.clientY;
                    var img = new Image();
                    evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
                    evt.originalEvent.dataTransfer.setData('text/plain', 'anything');

                }
            };

            container.getImagePosition = function() {
                return {
                    x: settings.x,
                    y: settings.y,
                    scale: settings.scale
                };
            };

            container.onDragOver = function(evt) {

                if (evt.target.getContext) {
                    var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
                    if (pixel[3] === 255) {
                        if (draggable && $(canvas).attr("active") === "true") {
                            var x = settings.x + evt.clientX - prevX;
                            var y = settings.y + evt.clientY - prevY;
                            if (x == settings.x && y == settings.y)
                                return; // position has not changed
                            settings.x += evt.clientX - prevX;
                            settings.y += evt.clientY - prevY;
                            prevX = evt.clientX;
                            prevY = evt.clientY;
                            updateStyle();
                        }
                    } else {
                        evt.stopPropagation();
                        return false;
                    }
                }
            };

            function updateStyle()
            {
                //context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.globalCompositeOperation = "source-over";
                image = new Image();
                image.setAttribute('crossOrigin', 'anonymous');
                image.src = settings.maskImageUrl;
                image.onload = function() {
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0, image.width, image.height);
                    div.css({
                        "width": image.width,
                        "height": image.height
                    });
                    img = new Image();
                    img.setAttribute('crossOrigin', 'anonymous');
                    img.src = settings.imageUrl;
                    img.onload = function() {
                        settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                        settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                        context.globalCompositeOperation = 'source-atop';
                        context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                        initImage = false;
                    };
                };
            };

            // change the draggable image
            container.loadImage = function(imageUrl) {
                console.log("load");
                //if (img)
                // img.remove();
                // reset the code.
                settings.y = startY;
                settings.x = startX;
                prevX = prevY = 0;
                settings.imageUrl = imageUrl;
                initImage = true;
                updateStyle();
            };

            // change the masked Image
            function loadMaskImage(imageUrl) {
                canvas = document.createElement("canvas");
                context = canvas.getContext('2d');
                canvas.setAttribute("draggable", "true");
                canvas.setAttribute("id", settings.id);
                settings.maskImageUrl = imageUrl;
                div = $("<div/>", {
                    "class": "masked-img"
                }).append(canvas);

                // div.find("canvas").on('touchstart mousedown', function(event)
                div.find("canvas").on('dragstart', function(event) {
                    if (event.handled === false) return;
                    event.handled = true;
                    container.onDragStart(event);
                });

                div.find("canvas").on('touchend mouseup', function(event) {
                    if (event.handled === false) return;
                    event.handled = true;
                    container.selected(event);
                });

                div.find("canvas").bind("dragover", container.onDragOver);
                container.append(div);
                if (settings.onMaskImageCreate)
                    settings.onMaskImageCreate(div);
                container.loadImage(settings.imageUrl);
            };
            loadMaskImage(settings.maskImageUrl);
            JQmasks.push({
                item: container,
                id: settings.id
            })
            return container;
        };
    }(jQuery));

.container {
            background: gold;
            position: relative;

        }

        .container img {
            position:absolute;
            top:0;
            bottom:250px;
            left:0;
            right:0;
            margin:auto;
            z-index:999;
        }

        .masked-img {
            overflow: hidden;
            position: relative;
        }

        .txtContainer{ position:absolute;  text-align:center; color:#FFF}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<input id="fileup" name="fileup" type="file" style="display:none" >

<div class="container">

</div>