javascript - 如何在使用fabric时使用css更改画布的高度和宽度

Question

正如标题所说的一切。我想改变我的 HTML5 画布的大小。我正在使用fabricjs库来处理 HTML5 画布。但是，fabricjs 使画布的大小更小。现在我想使用 css 来调整它的大小，但它不会影响它。当我为画布提供其他 css 规则时，它确实会影响但不会影响宽度和高度。

jsfiddle

这是我的fabricjs代码

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

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

canvas.add(rect);

这是我的html

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

这是我的 CSS

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

Answer 1

找到了答案。以下解决方案对我有用

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

第二种解决方案是

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