title: Fabric.js/Angular - When I change the image of a canvas object, it disappears and then reappears
body: <p>What I want to do:</p>
  
  <ol>
  <li>Select the object on the canvas </li>
  <li>Click change image to change the selected image on the canvas</li>
  </ol>
  
  <p>What is happening:</p>
  
  <ol>
  <li>Image disappears, but reappears as the new image when you try to move the empty area. </li>
  </ol>
  
  <p>I have no idea why it's doing this.  I assume its some sort of re-compiling of the DOM that has to be instantiated from the controller but I'm not sure.  </p>
  
  <p>Thanks in advance.  The jsfiddle demonstrates the problem but I've shown the code below as well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('canvasApp', [])
  
  .controller('MainCtrl', function($scope){
  
   $scope.up = function(){
    $scope.$broadcast('change');
   }
  
  })
  
  
  
  .directive('ngCanvas', function(){
   return {
    restrict: 'EA',
    scope: true,
    template: '&lt;canvas id="canvas" width="1000" height="500" data-drop="true" jqyoui-droppable="{onDrop:\'drop(event, data, obj)\'}" &gt;&lt;/canvas&gt;',
    controller: function($scope){
     
     $scope.$on('change', function(event){
      var tmp = $scope.canvas.getActiveObject();
      
      var el = tmp.getElement();
      
      el.setAttribute('src', "https://www.filepicker.io/api/file/7b3SLVgR65Fx4Q8JZyxQ");
  
      $scope.canvas.renderAll();
      $scope.canvas.calcOffset();
     });  
  
    },
    link:  function(scope, element, attrs){
  
     scope.canvas = new fabric.Canvas('canvas');
     
     fabric.Image.fromURL("https://www.filepicker.io/api/file/jGVMrkPuQ8eNGn5BpsiB", function(oImg) {
      scope.canvas.add(oImg);
     });
    }
  
   }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.js"&gt;&lt;/script&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://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;body ng-app="canvasApp"&gt;
   &lt;div ng-controller="MainCtrl"&gt;
  
   &lt;button id="click" ng-click="up()"&gt;Change Image&lt;/button&gt;
  
   &lt;div ng-canvas&gt;&lt;/div&gt;
   
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/eg4y6d3k/4/" rel="nofollow">http://jsfiddle.net/eg4y6d3k/4/</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>If this same code is done as straight JS, without angular, it still has the same issue.  Code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var canvas = new fabric.Canvas('canvas');
  
    fabric.Image.fromURL("https://www.filepicker.io/api/file/jGVMrkPuQ8eNGn5BpsiB", function(oImg) {
      canvas.add(oImg);
    });
  
    var up = function() {
      var tmp = canvas.getActiveObject();
      var el = tmp.getElement();
  
      el.setAttribute('src', "https://www.filepicker.io/api/file/7b3SLVgR65Fx4Q8JZyxQ");
  
      canvas.renderAll();
      canvas.calcOffset();
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;button id="click" onclick="up()"&gt;Change Image&lt;/button&gt;
  
    &lt;canvas id="canvas" width="1000" height="500"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>