Canvas loses style when I create Fabric.js canvas object

Question

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.Canvas('mycanvas');

my HTML Canvas has top and left attributes set on 0.

I have tried setting the top and left attributes after the creation of fabric Canvas object through a script but when I do this the canvas changes position but the fabric function (selection and moving functions) remain where the canvas was located previously (where fabric Canvas has positioned it)!

What can I do to resolve this conflict? Is there a way to keep equal the canvas?

Bop

Answer 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".

Stalingrad

I was unable to over-ride fabric's positioning of the canvas. – Fayth

canvas-container class is not overriding, its not applying any css to this div. – Incommensurable

@PiyushDholariya I think you are using the CSS in js or something that scoped CSS, actually, I was using fabric with vue.js and facing the same issue but when I moved my canvas-container CSS rule to global file it works – Carlsbad

Answer 2

answer from my identical thread

apply

margin: 0 auto;

to class = canvas-container

canvas-container is automatically created by fabric.

see fiddle

Fayth

canvas-container class is not overriding, its not applying any css to this div – Incommensurable

Answer 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.

Ringleader

Answer 4

You may override the canvas-container class upon initialization like so:

new fabric.Canvas('canvasId', {containerClass: 'custom-container-class'});

http://fabricjs.com/docs/fabric.Canvas.html#containerClass

Rhapsody

Answer 5

I was able to override the style of the canvas-container by setting the element style after DOM was loaded.

HTML

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

JAVASCPRIT

const fabricCanvas = new fabric.Canvas("canvas", { containerClass: "myFabricCanvas"})


document.addEventListener('DOMContentLoaded', async function () {
document.getElementsByClassName('myFabricCanvas')[0].style.position="absolute"
document.getElementsByClassName('myFabricCanvas')[0].style.top=0
document.getElementsByClassName('myFabricCanvas')[0].style.left=0
});

Catlee