JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<script src="http://www.buddy.is/item/getImage/a3f3eb5ee0d96f784a"></script>
<div id="filtername" data-type="test"></div>

Caman Processed:
<canvas id="myCanvas" data-caman-hidpi-disabled></canvas>
<img id="myImg" style="display:none;" src="http://dev.breinwave.nl/mdg/escaperoom/hint1.jpg">

    
Original:    
<div id="newArea"></div>

<img id="testImage1" style="display:none;" src="http://dev.breinwave.nl/mdg/escaperoom/hint1.jpg">

JavaScript

var $myCanvas = $("#myCanvas");
var context = $myCanvas[0].getContext('2d');
var $myImg = $("#testImage1");
$myCanvas[0].width = $myImg[0].width;
$myCanvas[0].height = $myImg[0].height;
context.drawImage($myImg[0], 0, 0);


// Clone the original canvas
var $cloneCanvas = $myCanvas.clone();
		
// Clone the image stored in the $resizedCanvas as well
$cloneCanvas[0].getContext('2d').drawImage($myCanvas[0],0,0);
		
// Add the clone to the page and trigger the Caman library on it
$("#newArea").find('canvas').remove().end().append($cloneCanvas);


var filterName = $.trim($("#filtername").attr("data-type"));

console.log(filterName);


//Caman.DEBUG = true;

/////////////////////////////////////////////////////////////////

Caman.Filter.register("test", function() {

    this.curves('rgb', [0, 0], [0, 43], [0, 226], [0, 255]);
    
    return this;
});    




///////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////

Caman($myCanvas[0], function () {
	// If such an effect exists, use it:
	if( filterName in this){
		this[filterName]();
		this.render();
        console.log("Caman ready");
	}
	else {
		console.log("custom filter not found ++++++");
	}

});	// end Caman