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>

`fabric.Image.fromURL('img/viper-board.png', function(myImg) { var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150}); canvas.add(img1); });` add image like this — Durga, Oct 10 '17 at 06:03
@Durga Does not work. A new Error appears "Uncaught TypeError: Cannot read property 'canvas' of undefined" — Valentin Gavran, Oct 10 '17 at 13:59
@Durga Any ideas for this problem? Nobody is responsing and it's still important... — Valentin Gavran, Dec 31 '17 at 18:38
This is zero night and m responding to you, will try by tomorrow evening.. Happy new year — Durga, Dec 31 '17 at 18:40

score 1 · Accepted Answer · answered Jan 01 '18 at 11:17

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.

answered Jan 01 '18 at 11:17

Durga

13,489
2
19
40

Thank your, now I can import an Image from any URL! The problem was that somehow FabricJS thought that canvas is not declared but you solfed it with `var self = this;` – Valentin Gavran Jan 03 '18 at 12:17
1

give a look on [this](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – Durga Jan 03 '18 at 12:19

Polymer Element Error by displaying Image inside FabricJS Canvas

1 Answers1