title: Uploaded image display with background image after click on button from canvas HTML5
body: <p>I am using HTML5 and fabric js. I am taking tow background images and upload image on this background image. But when i am converting canvas into image then only uploaded image come. I will show you screen shot.<a href="https://i.stack.imgur.com/UCHIv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UCHIv.png" alt="enter image description here"></a>
  <br><br><br>
  After click on submit button:
  <a href="https://i.stack.imgur.com/JbllF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JbllF.png" alt="enter image description here"></a></p>
  
  <p>In second screen shot only uploaded image will come. But i want uploaded image should be come with background image.</p>
  
  <p>CODE:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &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;/head&gt;
  &lt;body&gt;
   &lt;style&gt;
              canvas{
                  border: 1px solid black;
              }
              #canvascolor input {
                  height:50px;
                  width:50px;
              }
          &lt;/style&gt;
           &lt;input type="file" id="file"&gt;
                      &lt;canvas id="canvas" width="520" height="520"&gt;&lt;/canvas&gt;
                      &lt;section id="canvascolor"&gt;                      
                          &lt;input  class="canvasborder" type="image" src="http://assets.craniumfitteds.com/images/main/Houston-Astros-New-Era-Crew-Neck-Tshirt-3.jpg"&gt;
                          &lt;input  class="canvasborder" type="image" src="http://skyje.com/wp-content/uploads/2010/12/Free-Blank-T-Shirt-Template-500x500.jpg"&gt;
                      &lt;/section&gt;
                      &lt;button href='' id='txt' target="_blank"&gt;submit&lt;/button&gt;
                      &lt;br /&gt;
                      &lt;img id="preview" /&gt;
             &lt;script&gt;
               var canvas = new fabric.Canvas('canvas');
              $("#canvascolor &gt; input").click(function () {
                  var img = $(this).attr('src');
                  $('#canvas').css("background-image", "url(" + img + ")");
              });
              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();
                          var a = canvas.setActiveObject(oImg);
                          var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
                      });
                  };
                  reader.readAsDataURL(file);
              });
              document.querySelector('#txt').onclick = function (e) {
                  e.preventDefault();
                  canvas.deactivateAll().renderAll();
                  document.querySelector('#preview').src = canvas.toDataURL();
              };
             &lt;/script&gt;         
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can see two t-shirt black and white. You can select background image from two t-shirt after click on it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var canvas = new fabric.Canvas('canvas');
              $("#canvascolor &gt; input").click(function () {
                  var img = $(this).attr('src');
                  $('#canvas').css("background-image", "url(" + img + ")");
              });
              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();
                          var a = canvas.setActiveObject(oImg);
                          var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
                      });
                  };
                  reader.readAsDataURL(file);
              });
              document.querySelector('#txt').onclick = function (e) {
                  e.preventDefault();
                  canvas.deactivateAll().renderAll();
                  document.querySelector('#preview').src = canvas.toDataURL();
              };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> canvas{
                  border: 1px solid black;
              }
              #canvascolor input {
                  height:50px;
                  width:50px;
              }</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;canvas id="canvas" width="520" height="520"&gt;&lt;/canvas&gt;
                      &lt;section id="canvascolor"&gt;                      
                          &lt;input  class="canvasborder" type="image" src="http://assets.craniumfitteds.com/images/main/Houston-Astros-New-Era-Crew-Neck-Tshirt-3.jpg"&gt;
                          &lt;input  class="canvasborder" type="image" src="http://skyje.com/wp-content/uploads/2010/12/Free-Blank-T-Shirt-Template-500x500.jpg"&gt;
                      &lt;/section&gt;
                      &lt;button href='' id='txt' target="_blank"&gt;submit&lt;/button&gt;
                      &lt;br /&gt;
                      &lt;img id="preview" /&gt;</code></pre>
  </div>
  </div>
  </p>