Polymer Element Error by displaying Image inside FabricJS Canvas

Question

I'm trying to display an Image on the FabricJS Canvas inside my Polymer Element. By doing this, this error appears:

Uncaught TypeError: Cannot read property '_set' of undefined
at klass._onObjectAdded (fabric.js:6964)
at klass.add (fabric.js:260)
at HTMLElement.ready (convert-section.html:97)
at HTMLElement._enableProperties (property-accessors.html:531)
at HTMLElement.connectedCallback (element-mixin.html:630)
at HTMLElement._attachDom (element-mixin.html:690)
at HTMLElement._readyClients (element-mixin.html:663)
at HTMLElement._flushClients (property-effects.html:1518)
at HTMLElement._propertiesChanged (property-effects.html:1644)
at HTMLElement._flushProperties (property-accessors.html:549)

Is it possible to display an Image on a FabricJs canvas inside my Polymer Element? Or did I made an misstake? I'm new to Polymer and I don't have much experience.

I can display shapes like triangles etc.

Here is my Element:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="my-paper-element-styles.html">

<dom-module id="convert-section">
     <template>
    <style include="my-paper-element-styles">
    </style>

  <canvas  id="convertCanvas" ></canvas>

  </template>
     <script>
          class ConvertSection extends Polymer.Element {
               static get is() {
                    return 'convert-section';
               }
               static get properties() {
                    return {
                         imageLocationPath: {
                              type: String,
                              notify: true
                         }
                    };
               }
               disconnectedCallback() {
                 super.disconnectedCallback();
                 this.imageLocationPath = "";
               }
               ready() {
                    super.ready();
                    this.canvas = this.__canvas = new fabric.Canvas(this.$.convertCanvas);
                    var height = window.innerHeight - 48;
                    var width = window.innerWidth - 300;
                    this.canvas.setHeight(height);
                    this.canvas.setWidth(width);
                    var image = fabric.Image.fromURL('img/viper-board.png');
                    this.canvas.add(image);
               }

          }
          window.customElements.define(ConvertSection.is, ConvertSection);
     </script>
     <script src="../../node_modules/fabric/dist/fabric.js"></script>
</dom-module>

Answer 1

ready() {
  super.ready();
  var self = this;
  self.canvas = self.__canvas = new fabric.Canvas(self.$.convertCanvas);
  var height = window.innerHeight - 48;
  var width = window.innerWidth - 300;
  self.canvas.setHeight(height);
  self.canvas.setWidth(width);
  fabric.Image.fromURL('img/viper-board.png',function(oImg){
   oImg.set({
    left:10,
    top:10
   });
   self.canvas.add(oImg);
  });
}

As you can see fromURL doesn't return anything. You need to pass source url and a callback function and add that image inside callback function.