title: Using Fabric.js with Angular 4
body: <p>I'm new Angular and Fabric.js. I'm trying to build a UI where users can drag and drop objects onto a canvas and then connect them with lines.</p>
  
  <p>In essence I'm hoping to get the Angular4 drag and drop example from the first link to play well with the Fabric.js canvas found at the second link.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="https://www.npmjs.com/package/ng2-drag-drop"&gt;Drag and Drop&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://codepen.io/janih/pen/Pqwbpe"&gt;Canvas Example&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The drag and drop example works but the Fabric.js canvas renders in Chrome as a square box and nothing more.</p>
  
  <p>Steps I've taken: </p>
  
  <p>In tsconfig.json I've set "allowJs": true</p>
  
  <p>My dnd.component.html looks like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="canvas.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
    canvas {
      border: 1px solid #ccc;
    }
  &lt;/style&gt;
  &lt;div class="container"&gt;
      &lt;div&gt;
          &lt;simple-dnd&gt;&lt;/simple-dnd&gt;
          &lt;canvas id="c" width="600" height="600"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And canvas.js looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>setTimeout(function() {
    $(document).ready(function () {
       var canvas = new fabric.Canvas('c', {selection: false});
       var grid = 50;
       // create grid
       for (var i = 0; i &lt; (600 / grid); i++) {
           canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], {stroke: '#ccc', selectable: false}));
           canvas.add(new fabric.Line([0, i * grid, 600, i * grid], {stroke: '#ccc', selectable: false}))
       }
       // add objects
       var rect = new fabric.Rect({
           left: 100,
           top: 100,
           width: 247,
           height: 309,
           fill: '#9f9',
           originX: 'left',
           originY: 'top',
           centeredRotation: true
       });
       canvas.add(rect);
       var rect2 = new fabric.Rect({
           left: 100,
           top: 100,
           width: 223,
           height: 167,
           fill: '#faa',
           originX: 'left',
           originY: 'top',
           centeredRotation: true
       });
       canvas.add(rect2);
       var rect3 = new fabric.Rect({
           left: 196,
           top: 334,
           width: 150,
           height: 75,
           fill: 'blue',
           originX: 'left',
           originY: 'top',
           centeredRotation: true
       });
       canvas.add(rect3);
       canvas.renderAll();
    });
   }, 0);
  </code></pre>