javascript - Image is occupying only in little space inside box -

we using stackoverflow links code upload image in site

once upload, occupying little part in box here.

but image should occupy full box.

var canvas = new fabric.canvas('canvas');  document.getelementbyid('file').addeventlistener("change", function (e) {    var file = e.target.files[0];    var reader = new filereader();    reader.onload = function (f) {      var data = f.target.result;                          fabric.image.fromurl(data, function (img) {        var oimg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);        canvas.add(oimg).renderall();        var = canvas.setactiveobject(oimg);        var dataurl = canvas.todataurl({format: 'png', quality: 0.8});      });    };    reader.readasdataurl(file);  });

canvas{    border: 1px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>  <input type="file" id="file"><br />  <canvas id="canvas" width="450" height="450"></canvas>

replace line

var oimg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 

with

var oimg = img.set({left: 0, top: 0, angle: 00, width: canvas.getwidth(), height: canvas.getheight()}); 

this restricting image size. also, don't know why have scale there - if keep .scale(0.9), won't fill whole box. instead fill 90% of width , height.

snippet

var canvas = new fabric.canvas('canvas');  document.getelementbyid('file').addeventlistener("change", function (e) {    var file = e.target.files[0];    var reader = new filereader();    reader.onload = function (f) {      var data = f.target.result;                          fabric.image.fromurl(data, function (img) {        var oimg = img.set({left: 0, top: 0, angle: 00,width:canvas.getwidth(), height:canvas.getheight()});        canvas.add(oimg).renderall();        var = canvas.setactiveobject(oimg);        var dataurl = canvas.todataurl({format: 'png', quality: 0.8});      });    };    reader.readasdataurl(file);  });

canvas{    border: 1px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>  <input type="file" id="file"><br />  <canvas id="canvas" width="450" height="450"></canvas>   run code snippet