Using Fabric.js with Angular 4

Question

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.

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.

<ul>
    <li><a href="https://www.npmjs.com/package/ng2-drag-drop">Drag and Drop</a></li>
    <li><a href="https://codepen.io/janih/pen/Pqwbpe">Canvas Example</a></li>
</ul>

The drag and drop example works but the Fabric.js canvas renders in Chrome as a square box and nothing more.

Steps I've taken:

In tsconfig.json I've set "allowJs": true

My dnd.component.html looks like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>

<style>
  canvas {
    border: 1px solid #ccc;
  }
</style>
<div class="container">
    <div>
        <simple-dnd></simple-dnd>
        <canvas id="c" width="600" height="600"></canvas>
    </div>
</div>

And canvas.js looks like this:

setTimeout(function() {
  $(document).ready(function () {
     var canvas = new fabric.Canvas('c', {selection: false});
     var grid = 50;
     // create grid
     for (var i = 0; i < (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);

Answer 1

What worked for me (2Toad's solution: https://stackoverflow.com/a/49481766/9753985) on Angular 7:

First install fabric:

• npm i fabric

• npm i @types/fabric

Add the canvas element in your HTML:

<canvas id="canvas" width="500" height="500"></canvas>

Then in your TS import fabric and create your fabric object :

 import { Component, OnInit } from '@angular/core';
 import { fabric } from 'fabric';

 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
 export class AppComponent implements OnInit  {

   canvas: any;

   ngOnInit() {
     this.canvas = new fabric.Canvas('canvas');
     this.canvas.add(new fabric.IText('Hello World !'));
   }
 }