How to toggle objects on a canvas with selector?

Question

I have a selector with 2 options. Option 1 should only display the IText and option 2 should NOT display the IText but SHOULD display the image, and some extra info (the div). How can I make the selector toggle the canvas objects so that I can switch back and forth, instead of having everything load at once as it is? Here is a fiddle of what I have.

I'm using fabric.js version 1.7.20, if it matters.

var canvas = new fabric.Canvas('c');
canvas.setHeight(600);
canvas.setWidth(637);

$(function() {
  $('#selector').change(function() {
    $('.options').hide();
    $('#' + $(this).val()).show();
  });
});

// some IText, intended for option one only
canvas.add(new fabric.IText('Some Text That Should Only\nBe Displayed with Option One', {
  left: 175,
  top: 55,
  fontSize: 27,
}));

// frame image, intended for option two only
fabric.Image.fromURL('https://i.imgur.com/DrzSWSa.png', function(img) {
  isImageLoaded = true;
  oImg = img.set({
    selectable: false,
    evented: false,
  }).scale(0.5);
  canvas.add(oImg).renderAll();
  canvas.sendToBack(oImg);
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<Select id="selector">
   <option value="one">Option One</option>
   <option value="two">Option Two</option>
</Select>
<div id="two" class="options" style="display:none">Display with Option 2 Selected</div>

<canvas id="c"></canvas>

Answer 1

You can use visible property to show/hide fabric objects on canvas.

http://fabricjs.com/docs/fabric.Object.html#visible

var canvas = new fabric.Canvas('c');
canvas.setHeight(600);
canvas.setWidth(637);
var currentSelection = 'one';
$(function() {
  $('#selector').change(function() {
    currentSelection = $(this).val()
    $('.options').hide();
    $('#' + currentSelection).show();
    canvas.forEachObject(function(obj) {
      obj.visible = (obj.showWith === currentSelection);
    });
    canvas.renderAll();
  });
});



// some IText, intended for option one only
canvas.add(new fabric.IText('Some Text That Should Only\nBe Displayed with Option One', {
  left: 175,
  top: 55,
  fontSize: 27,
  showWith: 'one',
  visible: currentSelection === 'one'
}));

// frame image, intended for option two only
fabric.Image.fromURL('https://i.imgur.com/DrzSWSa.png', function(img) {
  isImageLoaded = true;
  oImg = img.set({
    selectable: false,
    evented: false,
    showWith: 'two',
    visible: currentSelection === 'two'

  }).scale(0.5);
  canvas.add(oImg).renderAll();
  canvas.sendToBack(oImg);
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<Select id="selector">
   <option value="one">Option One</option>
   <option value="two">Option Two</option>
</Select>
<div id="two" class="options" style="display:none">Display with Option 2 Selected</div>

<canvas id="c"></canvas>