Create RGB

Example:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
  <input id="sliderRed" type="range" min="-255" max="255" step="10" value="0">
  <input id="sliderGreen" type="range" min="-255" max="255" step="10" value="0">
  <input id="sliderBlue" type="range" min="-255" max="255" step="10" value="0">
    <div id="container"></div>
    <script src="js/kinetic-v4.6.0.js"></script>
    <script defer="defer">
      var imageObj = new Image();
      imageObj.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 300
        });
        var layer = new Kinetic.Layer();
        darth = new Kinetic.Image({
          x: 10,
          y: 10,
          image: imageObj,
          draggable: true,
          filter: Kinetic.Filters.RGB,		  
          filterRed: 0,
		  filterGreen: 0,
		  filterBlue:0
        });
      
        layer.add(darth);
        stage.add(layer); 
		
		var sliderRed = document.getElementById('sliderRed'); 
        sliderRed.onchange = function() {
          darth.setFilterRed(Math.round(sliderRed.value));
          layer.batchDraw();    
        };
		var sliderGreen = document.getElementById('sliderGreen'); 
        sliderGreen.onchange = function() {
          darth.setFilterGreen(Math.round(sliderGreen.value));
          layer.batchDraw();    
        };
		var sliderBlue = document.getElementById('sliderBlue'); 
        sliderBlue.onchange = function() {
          darth.setFilterBlue(Math.round(sliderBlue.value));
          layer.batchDraw();    
        };
      };
      imageObj.src = 'images/1.png'; //Image must be on the same server.
    </script>
  </body>
</html>