title: How to make canvas data persistent while moving image fabric object?
body: <p>please see the code reference here, <a href="https://codepen.io/chak_parul_scanova/pen/WNXvJrG" rel="nofollow noreferrer">https://codepen.io/chak_parul_scanova/pen/WNXvJrG</a></p>
  <pre><code>var slider = document.getElementById(&quot;myrange&quot;);
  var temp = slider.value;
  var output = document.getElementById(&quot;demo&quot;);
  output.innerHTML = slider.value;
  canvasSVGIMage();
  slider.oninput = function() {
    output.innerHTML = this.value;
    temp = this.value;
    canvasSVGIMage();
  }
  
  function canvasSVGIMage() {
  var canvas1 = new fabric.Canvas('d');
  var a = fabric.loadSVGFromURL('https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg',                   function(objects, options) {
    var obj1 = fabric.util.groupSVGElements(objects, options);
    if(obj1.paths) {
      for (var i = 0; i &lt; obj1.paths.length; i++) {
        obj1.paths[i].set({
          left: canvas1/2,
          top: canvas1/2,
          fill: 'pink',
          stroke: 'blue',
          strokeWidth: temp
        });
      }
      }  
    canvas1.add(obj1).renderAll();
  });
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;canvas id=&quot;c&quot; width=&quot;200px&quot; height=&quot;200px&quot; style='border: solid 1px black'&gt;&lt;/canvas&gt; &lt;span&gt; example:1&lt;/span&gt;
  
  &lt;canvas id=&quot;d&quot; width=&quot;200px&quot; height=&quot;200px&quot; style='border: solid 1px red'&gt;&lt;/canvas&gt;  &lt;span&gt; example:2&lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  Range of stroke on image
  &lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; style=&quot;margin:12px&quot; value=&quot;10&quot; id='myrange'&gt;
  &lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;
  </code></pre>
  
  <p>while moving the image taking only initial value of slider as stroke width</p>