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

Question

I am new to famo.us and cloned the start example. What I was trying to do, is to create a CanvasSurface, create an Image, load ImageData into it, then draw() the Image onto the canvas' context.

The strange thing is, that it works once, when not defining a custom size. When refreshing Firefox the image is loaded, but not seen.

However, I want to have the canvas behave as if it had the css style: width:100%; Therefore effectively scaling the drawn image, so that it's width corresponds with the window size.

If somebody could point me to my obvious mistake, why the image is not rendered onto the canvas, I'd be very 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 the 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);

The thing to remember here is that you are having to deal with a `canvas` element the same as you would without `famo.us`. The timing and canvas size are important when drawing an image to the canvas. Hope my answer clears it up a little. Also, there is not a valid value `false` in sizing `famo.us`. I changed to use a modifier to size the `CanvasSurface` to show it does not matter how you set the size. — talves, May 12 '15 at 17:11

talves · Accepted Answer · 2015-05-12T17:12:45.423

CanvasSurface allows for the sizing of the canvas:

backgroundCanvas.setSize(surfaceSize, canvasSize);

A canvas element should be sized the same size as the image to be drawn. The CanvasSurface will take care of sizing the surface.

In the code below, might be better practice to wait for the CanvasSurface to deploy to get the deployed size, then load the image. After the image is loaded, the canvas size can be set to the size of the image loaded, so the size of the canvas can be set using setSize. Now you are ready to draw the image to the context of the 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 the 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 for 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>

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

1 Answers1