Can't resize canvas/scale using Fabric.js

Question

I need to display a large canvas as a smaller one for the purposes of good user interaction, but uploading a large canvas later. I am using Fabric.js and am trying the Canvas css trick where you set the width/height for the canvas in HTML and then set it via CSS to smaller one as documented here:

fabric.js resize canvas to fit screen

When I attempt to resize as follows, it makes the canvas 300x150 (default canvas) and doesn't respect my CSS.

HTML:

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

JavaScript:

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

canvas.width = 1000;
canvas.height = 1000;

CSS:

#c {
    width: 650px;
    height: 436px;
}

How can I adjust the "size" of the canvas the user interacts with while maintaining the "actual size" of the larger canvas via fabric.js? I am using bootstrap as well and am unsure if this would have any impact.

Answer 1

Replace your javascript code with:

 var canvas = new fabric.Canvas('c', {});  
    canvas.setWidth(1000) ;  
    canvas.setHeight(1000);