JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<script src="http://canvasquery.com/canvasquery.js"></script>
<div id="slider"></div>
<canvas id="myCanvas" width="578" height="400"></canvas>

JavaScript

jQuery(function($){
    $( "#slider" ).slider({
        range: true,
        min: 0,
        max: 1,
        step: .01,
        change: function(){
            cq('#myCanvas').shiftHsl(this.value, null, null);
        }
    });
});


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    cq('#myCanvas').shiftHsl(null, null, null);
};
imageObj.crossOrigin = "anonymous";
imageObj.src = 'http://lobbydata.com/Content/images/bg_price2.gif';