canvas - Preferred way to Animate a Famo.us CanvasSurface -

canvas - Preferred way to Animate a Famo.us CanvasSurface -

i've been scouring (still scant) discussions , documentation of famo.us looking hoped obvious thing: animate canvas in canvassurface. surprised have found not 1 single example.

i have made progress, hope post help foot on ladder.

here bare bones code (previously using window.requestanimationframe adjusted extend built-in render method), works, puzzled.

my question follows code:

define(function (require) { "use strict"; var engine = require('famous/core/engine'), view = require('famous/core/view'), canvassurface = require('famous/surfaces/canvassurface'), context = engine.createcontext(), // vividcanvas = function () { var v = new view(), cw = 320, ch = 240, c = 0, surface = new canvassurface({size: [cw, ch]}), ctxt = surface.getcontext('2d'), // redraw = function () { ctxt = surface.getcontext('2d'); // why line necessary? c += 1; c = c % 360; ctxt.fillstyle = "hsl(" + c + ", 100%" + ", 50%)"; ctxt.fillrect(0, 0, cw, ch); window.requestanimationframe(redraw); homecoming surface.id; // i.e. valid renderspec }; surface.render = redraw; v.add(surface); homecoming v; }; // context.add(new vividcanvas()); });

what puzzles me line ctxt = surface.getcontext('2d') (the first line in redraw function) necessary. have thought ctxt defined , in scope (see before redraw function declared).

indeed, if log ctxt, 2d canvas context in both cases. reason, canvas context made in redraw function different instance 1 made before first redraw.

this may demonstrated inserting console.log(ctxt === surface.getcontext('2d')) first line of redraw function (before ctxt redefined). logs false. not understand why. can explain?

if sense ctxt should point right thing throughout, , should not need adjusted, sec phone call getcontext should unnecessary. however, if omit it, canvas draws 1 time only.

so why that?

originally, had second, perhaps related question requestanimationframe. comments able replace line surface.render = redraw, , making sure redraw method returns surface id, allowing famo.us handle animation sync. andrew suggestion in comments.

when looking @ code of canvassurface, seems using 2 contexts. 1 utilize render to, while other 1 displayed. , when next animationframe begins, flips contexts.

/** * returns canvas element's context * * @method getcontext * @param {string} contextid context identifier */ canvassurface.prototype.getcontext = function getcontext(contextid) { this._contextid = contextid; homecoming this._currtarget ? this._currtarget.getcontext(contextid) : this._backbuffer.getcontext(contextid); };

canvas famo.us