I am trying to implement an opacity slider to adjust the visibility of selected objects based on the slider's position (100 indicates complete visibility). I am using fabric.js/master/dist/fabric.js and jQuery 3.3.1. Could you please help me identify what I might be doing wrong in this situation? Find more details about incorporating the Opacity slider on fabricjs.com here.
The error message I encounter is: "Uncaught TypeError: Cannot read property 'opacity' of undefined"
Here is what I currently have: https://codepen.io/s-harper/pen/QxeMXL
Attempts at solutions that I have tried include: Opacity slider for a fabric object
var canvas = new fabric.Canvas("c");
canvas.isDrawingMode = true;
// select, draw
$("#select").click(function() {
canvas.isDrawingMode = false;
});
$("#draw").click(function() {
canvas.isDrawingMode = true;
});
var activeObject = canvas.getActiveObject();
$("#alpha").slider( {
max : 100,
value : activeObject.opacity * 100,
slide: function (event, ui) {
activeObject.setOpacity(ui.value / 100);
canvas.renderAll();
},
stop : function (event, ui) {
canvas.renderAll();
}
});canvas {
border: solid 1px #000;
}
fieldset {
max-width: 350px;
}<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<br>
<button id="draw">Draw</button>
<button id="select">Select</button>
<br>
<br>
<fieldset>
<legend>Controls</legend>
<label for="alpha">Opactity</label>
<input type="range" id="alpha" name="alpha" min="0" max="100" value="100" step="1" />
</fieldset>Appreciate your assistance!