javascript - Fabric.js Images blurry -

i using fabric.js , jquery ui drag , drop scene creator. when drag , drop image canvas image becomes blurry/pixelated , appears zoomed in. i've been searching stackoverflow , google forever , can't find solutions. i'd appreciate suggestions on how fix it!

here code:

// html  <canvas id="scene"></canvas>  // draggable setup  $('.scene-item').draggable({     helper: 'clone',     appendto: 'body',     containment: 'window',     scroll: false,     zindex: 9999 });  // drop setup  var canvas = new fabric.canvas('scene');  canvas.setdimensions({     width: '800px',     height: '500px' }, {     cssonly: true }); document.getelementbyid("scene").fabric = canvas;  canvas.on({     'object:moving': function(e) {         e.target.opacity = 0.5;     },     "object:modified": function(e) {         e.target.opacity = 1;     } });   $('#scene').droppable({     drop: function(e, ui) {         if ($(e.target).attr('id') === 'scene') {             var pointer = canvas.getpointer();             fabric.image.fromurl(ui.draggable[0].currentsrc, function (img) {                 console.log(img);                 img.set({                     left: pointer.x - 20,                     top: pointer.y - 20,                     width: 52,                     height: 52,                     scale: 0.1                 });                 //canvas.clear();                 canvas.add(img);                 canvas.renderall();             });         }     }  }); 

this images on , off canvas:

here demo jsfiddle.net/dmlr6cgx/1

i figured out problem. had replace:

canvas.setdimensions({         width: '800px',         height: '500px'     }, {         cssonly: true     }); 

with

canvas.setheight(500); canvas.setwidth(800); canvas.renderall(); 

and works fine.