Make object hidden/visible with checkbox in Fabric.js

Question

How to make a visible/hidden object in the Canvas via the checkbox?

<input type="checkbox" id="visible" name="visible" checked> Visible
<canvas id="vertical" class="banner-design" height="600" width="500" style="border: 1px solid #000000;"></canvas>

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
this.__canvases.push(canvas);

A codepen demo : https://codepen.io/geen21/pen/LYRXLqx

Answer 1

To achieve this attach an event listener to the change event of the checkbox and use it to update the visible property of the Circle object.

var canvas = new fabric.Canvas("vertical", {
  selectionColor: 'rgba(0,255,0,0.3)',
  selectionBorderColor: 'red',
  selectionLineWidth: 5
});

let circle = new fabric.Circle({
  radius: 30,
  fill: "#f55",
  top: 100,
  left: 100
});
canvas.add(circle);

//this.__canvases.push(canvas);

document.querySelector('#visible').addEventListener('change', e => {
  circle.visible = e.target.checked;
  canvas.renderAll();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" id="visible" name="visible" checked> Visible
<canvas id="vertical" class="banner-design" height="600" width="500" style="border: 1px solid #000000;"></canvas>