Canvas Loses Style When I Create Fabric.js Canvas Object

I have a Canvas Object with top and left attributes defined through with a previous JavaScript function but when I create a fabric Canvas object var fabricCanvas= new fabric.Canv

Solution 1:

When you create a canvas with Fabric.js it wraps it in a div and adds a second <canvas> (used to select the objects rendered in the first canvas). This is explained in the wiki page of Fabric.js. If you want to position your canvas apply CSS rules to the parent div element which is of the class "canvas-container".

Solution 2:

answer from my identical thread

apply

margin: 0 auto;

to class = canvas-container

canvas-container is automatically created by fabric.

see fiddle

Solution 3:

Please notice that if your using some kind of css preprocessor (for me it was scss stylesheet inside Angular) - targeting the "canvas-container" class inside the component scss file will not work. For me the workaround was the general project css file.