JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<canvas id="canvas" width="600" height="300"></canvas>
<br/>
Brightness: <input id="brightness" type="range" min="0" max="20" value="0" />

JavaScript

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

fabric.Image.fromURL('http://gametest.mobi/phaser095/assets/pics/aya_touhou_teng_soldier.png', function(img) {
    img.set({
        left: 10,
        top: 50
    });

    canvas.add(img).setActiveObject(img);
    canvas.renderAll();
    
    var hiddenImg = document.createElement('img');
    hiddenImg.src = canvas.getActiveObject().toDataURL();
    hiddenImg.id = 'target';
    hiddenImg.style.display = 'none';
    document.body.appendChild(hiddenImg);
},{ crossOrigin: 'anonymous' });

document.getElementById('brightness').onchange = function() {
    Caman('#target', function (value) {
        //this.brightness(document.getElementById('brightness').value);
        this.stackBlur(doucment.getElementById('brightness').value);
        this.render(function() {
            canvas.getActiveObject().setSrc(document.getElementById('target').toDataURL(), function() {
                canvas.renderAll();
            });
        });
    });
}