title: How to select a color, fill it into the selected image that is uploaded in the canvas using fabric.js?
body: <p>I have this project, and one of the requirement would be customize and design an uploaded image in a canvas
  . So with customizing, I will upload an image, select it, and  I want to change or tint the color with the selected color. But I do not know how. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas('canvas');
          var clearEl = document.getElementById('clear');
          var reset = document.getElementById('Reset');
          clearEl.onclick = function ()
          {
              canvas.clear()
          };
          reset.onclick = function () {
              window.location.reload();
          };
          document.getElementById('file').addEventListener("change", function (e) {
              var file = e.target.files[0];
              var reader = new FileReader();
              console.log("reader   " + reader);
              reader.onload = function (f) {
                  var data = f.target.result;
                  fabric.Image.fromURL(data, function (img) {
                      var oImg = img.set({ left: 70, top: 100, width: 250, height: 200, angle: 0 }).scale(0.9);
                      canvas.add(oImg).renderAll();
                      canvas.setActiveObject(oImg);
                  });
              };
              reader.readAsDataURL(file);
          });
  
          $('#fill').change(function () {
              var obj = canvas.getActiveObject();
              if (obj) {
                  obj.setFill($(this).val());
              }
              canvas.renderAll();
          });
  
          $('#font').change(function () {
              var obj = canvas.getActiveObject();
              if (obj) {
                  obj.setFontFamily($(this).val());
              }
              canvas.renderAll();
          });
  
          function addText() {
              var oText = new fabric.IText('Tap and Type', {
                  left: 100,
                  top: 100,
              });
  
              canvas.add(oText);
              canvas.setActiveObject(oText);
              $('#fill, #font').trigger('change');
              oText.bringToFront();
          }
  
          document.querySelector('#txt').onclick = function (e) {
              e.preventDefault();
              canvas.deactivateAll().renderAll();
              document.querySelector('#preview').src = canvas.toDataURL();
          };
  $("#saveImg").click(function(){
              $("#canvas").get(0).toBlob(function(blob){ 
                  saveAs(blob, uuidv4());
                 
          });
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas{
  border:1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"&gt;&lt;/script&gt;
              &lt;input type="file" id="file"&gt;
              &lt;input type="color" value="blue" id="fill" /&gt;
              &lt;input type="checkbox" id=tint /&gt;
              Tint:
                &lt;input type="color" value="blue" id="fillimage" /&gt;
              &lt;select id="font"&gt;
                  &lt;option&gt;arial&lt;/option&gt;
                  &lt;option&gt;tahoma&lt;/option&gt;
                  &lt;option&gt;times new roman&lt;/option&gt;
              &lt;/select&gt;
              &lt;button onclick="addText(); return false;"&gt;Add Custom Text&lt;/button&gt;
                   &lt;input type="button" value="Clear Canvas" id="clear" /&gt;
                &lt;input type="button" value="Reset" id="Reset" /&gt;
               &lt;input type="button" id="saveImg" value="Save Image"/&gt;
              &lt;br /&gt;
              &lt;canvas id="canvas" width="600" height="400"&gt;&lt;/canvas&gt;
              &lt;br /&gt;
               
  
              &lt;a href='' id='txt' target="_blank"&gt;Preview Image&lt;/a&gt;
              &lt;br /&gt;
              &lt;img id="preview" /&gt;</code></pre>
  </div>
  </div>
  </p>