JavaScript
// start canvas
var canvas = new fabric.Canvas('c');
// Monkey patch in support for anim parameter
fabric.Object.prototype.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
anim: this.anim
});
};
})(fabric.Object.prototype.toObject);
// Set up data objects
var w = new Weather();
// Our dummy data
var json = '{"objects":[{"anim":"blink","type":"rect","originX":"left","originY":"top","left":0,"top":0,"width":40,"height":40,"fill":"#000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"anim":"tempF","type":"text","originX":"left","originY":"top","left":0,"top":50,"width":71.09,"height":52,"fill":"#999","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","text":"{{temp}}","fontSize":40,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.3,"textDecoration":"","textAlign":"left","path":null,"textBackgroundColor":"","useNative":true}],"background":""}';
// Let's load it!'
canvas.loadFromJSON(json);
// Here just in case we want to add more text blocks.
var text = new fabric.Text("time", {fill: '#999', anim: 'time', top: 100});
canvas.add(text);
// Loop over all canvas objects looking for special items.
canvas.forEachObject(function(obj){
if (obj.get('type') == 'rect') {
if (obj.get('anim') == 'blink') {
startBlink(obj);
}
}
if (obj.get('type') == 'text') {
...