CODEWITHSUNDEEP
javascriptcsshtmlhtml5-canvasfabricjs
mughees ilyas
mughees ilyas

Reputation: 526

Canvas loses style when I create Fabric.js canvas

I have a Canvas Object with top and left attributes defined through with JavaScript function but when I create a fabric Canvas object

var fabricCanvas= new fabric.Canvas('mycanvas');

my canvas is not appearing as it should i have tried doing this

reading stack over flow say margin : 0 auto solves the problem but it does not

.canvas-container {
     margin:0 auto ;
    position:absolute; 
           top: 110;
           left: 310;        

                  }

http://postimg.org/image/htvvfr5ct/

it just stay at the bottom and not comming to the middle position

Upvotes: 0

Views: 1667

Answers (1)

melwyn pawar
melwyn pawar

Reputation: 1816

By default a relative positioning style gets applied to the class canvas-container try adding important, see CSS code below:

.canvas-container {
    position:absolute !important; 
           top: 110;
           left: 310;
           }

I have removed the margin:0 auto as the element is positioned absolute. If you want to center an element using positioning use the below css:

.canvas-container {
width:800px; /*assuming a width of 800px*/
height:600px; /* assuming a height of 600px */
position:absolute !important; 
top: 50%;
left:50%;
margin-left:-400px; /* width/2 */
margin-top:-300px; /* height/2 */
           }

this would center the element as per the body, else you may add a position:relative to the parent of the element.

Upvotes: 1

Related Questions