Convert canvas into image with background image in html5
<p>I was implemented convert canvas into image, But when i am set background image, But it will not works.
I am using fabric js for canvas, But whenever i am set background image then canvas not converting in image. After set background image then i am clicking on My Click!! final image should be come.
 I have one JFFiddle.
<a href="https://jsfiddle.net/varunPes/vb1weL93/" rel="nofollow">https://jsfiddle.net/varunPes/vb1weL93/</a></p>

<p>Html:</p>

<pre><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;div class="col-sm-12"&gt;                    
      &lt;div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"&gt;&lt;strong&gt;Customize T-Shirt From Here&lt;/strong&gt;&lt;/div&gt;
             &lt;input type="file" id="file"&gt;            
             &lt;br/&gt;
              &lt;canvas id="canvas" width="750" height="550" style="border: 1px solid black;  box-shadow: rgba(0,0,0,0.8) 0 0 10px;"&gt;&lt;/canvas&gt;
              &lt;a href='' id='txt' target="_blank"&gt;Click Me!!&lt;/a&gt;&lt;br /&gt;
              &lt;img id="preview" /&gt;
  &lt;/div&gt;
</code></pre>

<p>Java Script:</p>

<pre><code> var canvas = new fabric.Canvas('canvas');

            // initialize fabric canvas and assign to global windows object for debug         

            canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg', canvas.renderAll.bind(canvas), {
            });



            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);
            });

            document.querySelector('#txt').onclick = function (e) {
                e.preventDefault();
                canvas.deactivateAll().renderAll();                
                document.querySelector('#preview').src = canvas.toDataURL();
            };
</code></pre>