Create checkbox mecanism with Fabric JS

Question

How can you create a checkbox like component with Fabric JS? More like to click on the image, and to set the opacity to 0. If you click again, to set the opacity to 1.

Here is my code:

For the checkbox image:

fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg', (image) => {
    image.scale(0.35);
    image.set({
        left: 152,
        top: 120,
        hoverCursor: 'default',
        selectable: true,
        opacity: 0.5,
        hasControls: false,
        lockMovementX: true,
        lockMovementY: true

    })
    if(image.onselect === true ) {
        image.set().opacity = 0;
    }
    canvas.add(image);
});

The box where the image is put:

function addBox(left, top, width, height) {
    const o = new fabric.Rect({
        left: left,
        top: top,
        width: 30,
        height: 30,
        fill: boxFill,
        strokeWidth: 2,
        originX: 'left',
        originY: 'top',
        centeredRotation: true,
        snapAngle: 45,
        selectable: true,
        type: 'box',
        id: generateId()
    })
    
    if(image.onselect === true ) {
        image.set().opacity = 0;
    }
     
    canvas.add(o)
    canvas.getObjects().map(o => {
        o.hasControls = false
        o.lockMovementX = true
        o.lockMovementY = true

        o.borderColor = '#38A62E'
        o.borderScaleFactor = 2.5
    })
    canvas.selection = false
    canvas.hoverCursor = 'pointer'
    canvas.discardActiveObject()
    canvas.renderAll()
    return o
}

How can I resolve this issue? Is there a way to make the image appear and dissapear when you click on it ( using opacity or something similarly) ?

Answer 1

Hope this helps you and many who want to add Event on objects.

var canvas = new fabric.Canvas("canvas");

function drawCheckbox(left,right, 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 = right; 
    img.hasControls = false

    img.on('mousedown', function(e) {
    if(e.target.opacity <= 0.5){
    e.target.opacity = 1;
    }else{
    e.target.opacity = 0.4;
    }
    canvas.renderAll();

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

  })
  }
  
  drawCheckbox(0,0, 100,100)
  drawCheckbox(100,100, 100,100)
  drawCheckbox(200,200, 100,100)

body {
    background-color:silver;
}
canvas {
    border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"> </script>

<canvas id="canvas" width=300 height=300></canvas><br>