CODEWITHSUNDEEP
javascripthtmlhtml5-canvasfabricjs
26ph19
26ph19

Reputation: 393

How to change the height and width of canvas using css while using fabric

As the title says everything. I want to change the size of my HTML5 canvas. I am using fabricjs library to work with HTML5 canvas. However, fabricjs makes the size of the canvas smaller. Now I want to its size using css but it does not affect it. When I give other css rules to canvas then it does affect but not width and height.

jsfiddle

Here is my fabricjs code

var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: 'red',
    width: 100,
    height: 100
});

canvas.add(rect);

here is my html

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

and here is my CSS

#c {
    width: 100%;
    border: 1px solid green;
}

Upvotes: 0

Views: 931

Answers (1)

26ph19
26ph19

Reputation: 393

Found the answer. Below solution works for me

var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(800);

Second solution is

<canvas id="c" width="900" height="600"></canvas>

Upvotes: 3

Related Questions