# FabricJs in Shopware nutzen

**URL:** <https://forum.shopware.com/t/fabricjs-in-shopware-nutzen/94639>\
**Category:** Programmierung\
**Created:** [1. Juni 2022 um 09:04 UTC](https://forum.shopware.com/t/fabricjs-in-shopware-nutzen/94639 "2022-06-01T09:04:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![StefanB](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@StefanB](https://forum.shopware.com/u/StefanB)\
**Post date:** [1. Juni 2022 um 09:04 UTC](https://forum.shopware.com/t/fabricjs-in-shopware-nutzen/94639/1 "2022-06-01T09:04:45Z")

</div>

Hey,

ich möchte die JS-Bibliothek Fabric.js in Shopware nutzen. Nun habe ich diese hinzugefügt und auch schon die Scripte erstellt, damit dies in das Shopware-System mitaufgenommen wird.

Bei der Instanziierung der Klasse fabric muss ich die Funktion **Canvas** aufrufen und dieser die ID des HTML-Canvas zuweisen.

Ich habe eine index.js in der ich die Plugin-Klasse von Shopware erweitere und FabricJs von den node\_modules importiere.

_Datei main.js_

```auto
import fabricjs from './fabricjs/index';

const PluginManager = window.PluginManager;
PluginManager.register("fabricjs", fabricjs, "[test]");

```

_Datei fabricjs/index.js_

```auto
import Plugin from "src/plugin-system/plugin.class";
import { Fabric } from 'fabric';

export default class fabricjs extends Plugin{
    init(){
        const fabric = new Fabric;
        fabric.appendTo(this.el)
    }
}

```

Wie kann ich denn jetzt auf diese Klasse mit der Funktion **.Canvas()** zugreifen? In dem Frontend Development Kurs wird gesagt, dass ich hier in der init()-Funktion eine neue Insanz erstellen soll und diese dann zu this.el hinzufügen soll.

Wenn ich dies jetzt mache kommt in der Console immer folgender Fehler: TypeError: **o.Fabric is not a constructor**.

Ich weiß gerade echt nicht weiter. Wie kann ich denn mit Fabric.js und ihren Funkionen in der Shopware 6 Umgebung arbeiten?