javascript - famous: can't draw image to CanvasSurface with own size property -

i new famo.us , cloned start example. trying do, create canvassurface, create image, load imagedata it, draw() image onto canvas' context.

the strange thing is, works once, when not defining custom size. when refreshing firefox image loaded, not seen.

however, want have canvas behave if had css style: width:100%; therefore scaling drawn image, it's width corresponds window size.

if point me obvious mistake, why image not rendered onto canvas, i'd happy.

http://codefamo.us/g/#gist=caeb0ba013ed3f955f33

/*global famous*/ // import dependencies var engine = famous.core.engine; var modifier = famous.core.modifier; var transform = famous.core.transform; //var imagesurface = famous.surfaces.imagesurface; var canvassurface = famous.surfaces.canvassurface; var surface = famous.core.surface;  // create main context var maincontext = engine.createcontext();    var backgroundcanvas = new canvassurface({     size: [undefined, false] });  var backgroundcontext = backgroundcanvas.getcontext('2d');  var imageobj = new image(); imageobj.src = 'http://upload.wikimedia.org/wikipedia/commons/f/fe/weltehandnuancierung.jpg'; imageobj.onload = function() {     console.log("images loaded. has width: " + imageobj.width);     backgroundcontext.drawimage(imageobj, 0, 0); };  maincontext.add(backgroundcanvas); 

canvassurface allows sizing of canvas:

backgroundcanvas.setsize(surfacesize, canvassize); 

a canvas element should sized same size image drawn. canvassurface take care of sizing surface.

in code below, might better practice wait canvassurface deploy deployed size, load image. after image loaded, canvas size can set size of image loaded, size of canvas can set using setsize. ready draw image context of canvas.

var engine = famous.core.engine;  var modifier = famous.core.modifier;  var transform = famous.core.transform;  //var imagesurface = famous.surfaces.imagesurface;  var canvassurface = famous.surfaces.canvassurface;  var surface = famous.core.surface;    // create main context  var maincontext = engine.createcontext();    var modifier = new modifier({    size: [undefined, true]  });    var backgroundcanvas = new canvassurface();    maincontext.add(modifier).add(backgroundcanvas);    backgroundcanvas.on('deploy', function() {    console.log("canvas surface deployed. has size: " + backgroundcanvas.getsize());    var imageobj = new image();    imageobj.src = 'http://upload.wikimedia.org/wikipedia/commons/f/fe/weltehandnuancierung.jpg';    imageobj.onload = function() {      var canvassize = backgroundcanvas.getsize();      var imagesize = [imageobj.width, imageobj.height];      console.log("image loaded. has size: " + imagesize);        // canvassurface.prototype.setsize = function setsize(size, canvassize)      backgroundcanvas.setsize(canvassize, imagesize);        var backgroundcontext = backgroundcanvas.getcontext('2d');      backgroundcontext.drawimage(imageobj, 0, 0);    };  });

<!-- shims backwards compatibility -->  <script type="text/javascript" src="http://code.famo.us/lib/functionprototypebind.js"></script>  <script type="text/javascript" src="http://code.famo.us/lib/classlist.js"></script>  <script type="text/javascript" src="http://code.famo.us/lib/requestanimationframe.js"></script>    <!-- famous -->  <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />  <script type="text/javascript" src="http://code.famo.us/famous/0.3.5/famous-global.min.js"></script>