title: Change background of Canvas in Fabric JS
body: <p>I am trying to change the background of Canvas. I am able to change the background of canvas but once i click on the background . It reload the original background and does not show the changed background. Hope you understand what i am trying to say. Following is the code which implementing to change the background.Based on select box,image will load</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="canvas-container" style="float:left;"&gt;
          &lt;canvas id="c" width="500" height="500" style="border:1px solid #ccc"&gt;     &lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;select id="color" class="styled-select"&gt;
      &lt;option value="red"&gt;Red&lt;/option&gt;
      &lt;option value="green"&gt;Green&lt;/option&gt;
      &lt;option value="purple"&gt;Purple&lt;/option&gt;
  &lt;/select&gt; 
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>var canvas = new fabric.Canvas('c');
  canvas.setBackgroundImage("red.png", canvas.renderAll.bind(canvas));
  $('select#color').on('change', function() {
      var imageName=this.value+".png"
      var canvas = new fabric.Canvas('c');
      canvas.setBackgroundImage(imageName, canvas.renderAll.bind(canvas));
  })
  </code></pre>