javascript - How to resize a background image to match the canvas? FabricJS -


so having problem. using meteor.js , fabric.js, , trying figure out how rescale image fit canvas. code:

 var canvas = new fabric.canvas('c1');  canvas.setwidth(800);  canvas.setheight(800);  var canvasheight = canvas.height;  var canvaswidth = canvas.width;   //just debug statement console.log(canvaswidth, canvasheight);   var bgimg = new fabric.image();  bgimg.setsrc('http://www.aamcocolorado.com/images/highway-  traffic.jpg');  bgimg.set({     top: canvasheight / 2,     left: canvaswidth / 2,     scalex: canvaswidth/bgimg.width,     scaley: canvasheight/bgimg.height,  });   canvas.setbackgroundimage(bgimg); 

the result of getting snippet of image, not scaled correct size. wondering missing?

(have checked out other answers, not able how apply meteor, js beginner)

setsrc asynchronous. can provide function callback run after image loads:

var

canvas = new fabric.canvas('c1'); canvas.setwidth(800); canvas.setheight(800); var canvasheight = canvas.height; var canvaswidth = canvas.width;  //just debug statement console.log(canvaswidth, canvasheight);  var bgimg = new fabric.image(); bgimg.setsrc('http://www.aamcocolorado.com/images/highway-traffic.jpg', function () {   bgimg.set({     top: 0,     left: 0,     scalex: canvaswidth/bgimg.width,     scaley: canvasheight/bgimg.height,   }); });  canvas.setbackgroundimage(bgimg); 

https://jsfiddle.net/upg0tyvz/1/


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -