Famo.us - How to add content to a CanvasSurface

Question

I've just moved to Famo.us and think it has some amazing potential. I am trying to build a new App using Famo.us and will be having 'layered' Views, one of which has a CanvasSurface inside.

My question is about how I would populate the CanvasSurface? I have checked the Docs and while they talk about some of the parameter options they do not tell you how.

I have a View within which I add a Layout and then a Surface to that Layout. Other Views that have ImageSurfaces work fine - but I do not know if I am on the right track with CanvasSurface.

So far I have: (part of inside a BackgroundView.js file)

function BackgroundView() {
    View.apply(this, arguments);
    _createLayout.call(this);
    _createBody.call(this);
    _setListeners.call(this);
}
function _createBody() {
  this.bodySurface = new CanvasSurface({
    canvasSize : [undefined, undefined]
  });
  var bodyContext= this.bodySurface.getContext('2d');
  bodyContext.fillText("Text on Canvas", 100, 100);
  this.layout.content.add(this.bodySurface);
}

It runs with no errors, but shows nothing. The CanvasSurface is rendered... Are there any examples using CanvasSurface or does anyone have any thoughts?

Thanks again for your help in advance.

:)

johntraver · Answer 1 · 2014-05-23T18:06:53.707

There are a couple of things I added to your code.. Defining the prototype and prototype.constructor, as well as adding the CanvasSurface to the BackgroundView. I found that canvasSize does not currently support the undefined size attribute like Surface does. You need to be explicit and use pixel size.

Check out what I did to your code.. Hope this helps..

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var View            = require('famous/core/View');

var CanvasSurface   = require('famous/surfaces/CanvasSurface');

var context = Engine.createContext();

function BackgroundView() {
    View.apply(this, arguments);
    // _createLayout.call(this);
    _createBody.call(this);
    // _setListeners.call(this);
}

BackgroundView.prototype = Object.create(View.prototype);
BackgroundView.prototype.constructor = BackgroundView;

function _createBody() {
    this.bodySurface = new CanvasSurface({
        size:[400,200]
    });
    var bodyContext= this.bodySurface.getContext('2d');
    bodyContext.font="20px Georgia";
    bodyContext.fillText("Hello World!",50,50);
    this.add(this.bodySurface);
}

var bg = new BackgroundView();

context.add(bg);

Thank you for replying. Sorry I should have said, I have what you've added, as it was part of the bolierplate from one of the examples. In the Browser Dev tools the canvasSurface has the size of the browser - which is what I wanted. But I'll try explicitly stating the canvas size and see what happens :). Thanks for suggesting it. — Pandafinity, May 23 '14 at 18:44
No problem! That is something worth suggesting to Famo.us as a feature to recognize undefined attribute of canvasSize and set it to the actual pixel size of the container. — johntraver, May 23 '14 at 18:52
This is very helpful. But I notice that if you use requestAnimationFrame (calling back inside e.g. _createBody), bodyContext seems to point to the 'wrong' 2d canvas object, and any subsequent redraws fail. Seems like calling getContext is necessary before every redraw. Is that true? I think I will ask another question about this. — brennanyoung, Jun 19 '14 at 13:31

Famo.us - How to add content to a CanvasSurface

1 Answers1