How can we change canvas width height after it loads in Fabric js

Question

I want to change the width and height of the canvas after it's load.Is that possible to do.I want to do it with a button click or in page load. I have two dynamic variables for Width and height.

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
  
    // create a rectangle with a fill and a different color stroke
    var rect = new fabric.Rect({
       left: 50,
       top: 50,
       width: 50,
       height: 50,
       fill: 'rgba(255,127,39,1)',
       stroke: 'rgba(34,177,76,1)',
       strokeWidth: 5
    });
    canvas.add(rect);
    canvas.renderAll();    
})();

function(){
  var c_width = 500px;
  var c_height= 600px;

}

<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="function()">change canvas </button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>

Answer 1

Use canvas.setDimensions to set width/height of canvas.

DEMO

var canvas = this.__canvas = new fabric.Canvas('canvas');

// create a rectangle with a fill and a different color stroke
var rect = new fabric.Rect({
   left: 50,
   top: 50,
   width: 50,
   height: 50,
   fill: 'rgba(255,127,39,1)',
   stroke: 'rgba(34,177,76,1)',
   strokeWidth: 5
});
canvas.add(rect);
canvas.renderAll();

function resizeCanvas(){
  canvas.setDimensions({
   width:500,
   height:600
  });
}

canvas{
  border:2px solid #000;
}

<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="resizeCanvas()">change canvas </button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>