title: Fabricjs canvas reset after zooming
body: <p>I have a <a href="https://github.com/kangax/fabric.js">fabricjs</a> canvas that I need to be able to zoom in and out and also change the image/object inside several times. </p>
  
  <p>For this I setup the canvas in the first time the page loads like this:</p>
  
  <pre><code>fabric.Object.prototype.hasBorders = false;
  fabric.Object.prototype.hasControls = false;
  
  canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false});
  
  canvas.defaultCursor = "pointer";
  canvas.backgroundImageStretch = false;
  canvas.selection = false;
  canvas.clear();
  
  var image =  document.getElementById('my_image');
  if (image != null) {
    imageSrc = image.src;
    if(imageSrc.length &gt; 0){
      fabric.Image.fromURL(imageSrc, function(img) {
        img = scaleImage(canvas, img); //shrinks the image to fit the canvas
        img.selectable = false;
        canvas.centerObject(img);
        canvas.setActiveObject(img);
        canvas.add(img);
      });
    }
  }
  canvas.deactivateAll().renderAll();
  </code></pre>
  
  <p>Then when I need to change the image/object in the canvas or when the page reloads, I try to reset the canvas like this:</p>
  
  <pre><code>canvas.clear();
  canvas.remove(canvas.getActiveObject());
  var image =  document.getElementById('my_image');
  if (image != null) {
    imageSrc = image.src;
    if(imageSrc.length &gt; 0){
      fabric.Image.fromURL(imageSrc, function(img) {
        img = scaleImage(canvas, img); //shrinks the image to fit the canvas
        img.selectable = false;
        canvas.centerObject(img);
        canvas.setActiveObject(img);
        canvas.add(img);
      });
    }
  }
  </code></pre>
  
  <p>Not sure if it matters but the way I change the image is by changing the source in 'my_image' and reseting the canvas with the above method.</p>
  
  <p>This works well until I use <code>canvas.zoomToPoint</code>, as per <a href="https://github.com/kangax/fabric.js/issues/731">this</a> thread, after this, the image/object starts changing position when I reset the zoom  or click the canvas with the mouse while it is zoomed, seeming to jump at each change in the top left corner direction, eventually disappearing from view.</p>
  
  <p>Reset Zoom:</p>
  
  <pre><code>canvas.setZoom(1);
  resetCanvas(); //(above method)
  </code></pre>
  
  <p>How can I restore the image/object position?</p>
  
  <p>I tried doing the initial setup instead of the reset and seamed to work visually but was in fact adding a new layer of upper canvas at each new setup so it is no good.</p>
  
  <p>Is there a way to reset the canvas to original state without causing this behavior and still be able to zoom in/out correctly? </p>