Fabric JS How to call a function from another function

Question

I have a function that hides and shows an image whenever it's clicked, but I want to do the same thing, by clicking another object.

Here is the code for the image

    function drawCheckbox(left, top, width, height){
        var imgClass = new fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg',function(img){
            img.width = width;
            img.height = height;
            img.left = left;
            img.top = top;
            img.set({
                hoverCursor: 'default',
                selectable: true,
                opacity: 0
    
            })
            img.on('mousedown', function(e) {
                if(e.target.opacity <= 0.5){
                    e.target.opacity = 1;
                }else{
                    e.target.opacity = 0;
                }
                canvas.renderAll();
    
            });
            canvas.add(img);
            canvas.renderAll();
    
        })
    }

And this is the code for the rectangle object:

    function addRect(left, top, width, height, id) {
        const o = new fabric.Rect({
            width: width,
            height: height,
            fill: tableFill,
            stroke: tableStroke,
            strokeWidth: 2,
            shadow: tableShadow,
            originX: 'center',
            originY: 'center',
            centeredRotation: true,
            snapAngle: 45,
            selectable: true
        })
    
        const t = new fabric.IText(number.toString(), {
            fontFamily: 'Calibri',
            fontSize: 14,
            fill: '#fff',
            textAlign: 'center',
            originX: 'center',
            originY: 'center'
        })
        const g = new fabric.Group([o, t], {
            left: left,
            top: top,
            centeredRotation: true,
            snapAngle: 45,
            selectable: true,
            type: 'table',
            id: id,
            number: number
        })
        canvas.add(g)
        number++
        g.on('selected', function () {
               // here I want to make de image dissapear, when the object is clicked
        })
    
        canvas.hoverCursor = 'pointer';
        canvas.discardActiveObject();
        canvas.renderAll();
        return g;
    }

I tried creating the image inside the rectangle, but it doesn't do anything when the rectangle it's clicked. Does anyone had a similar problem?

Here is the codepen: codepen.io/Zerro1/pen/PoZvmOE .

Answer 1

Here i have created a codepen for you, this is one way to do it. I tried to create a square and clicking on that square i am toggling the last checkbox visibility.

portion of code:

var square = new fabric.Rect({ 
        width: 100, 
        height: 100, 
        fill: '#000',
         left:120
    });
    square.on('mousedown', function(e) {
    if(img.opacity <= 0.5){
    img.opacity = 1;
    }else{
    img.opacity = 0;
    }
    canvas.renderAll();

    });
    canvas.add(img);
    canvas.add(square); 
    canvas.renderAll();