backbone app not showing canvas animation

Question

I am trying to convert my canvas code into backbone app... can you guys tell me how to fix it... providing my code below... i referred a sample code but could not figure it out... proving my fiddle and code below...

http://jsfiddle.net/JB9yg/191/

this is my working code without backbone http://jsfiddle.net/QhfVg/7/

var Box = Backbone.Model.extend({
        defaults: {
            var SIZE = 200;    
            var SPINNER_WIDTH = 20;
            var STEP_PERCENT = 1;
            var STEP_DELAY = 20;

            var radius, centerX, centerY;
            radius = centerX = centerY = SIZE / 2;

            var deg360 = Math.PI * 2;
            var deg60 = deg360 / 6;
            var deg30 = deg360 / 12;
            var deg1 = Math.PI / 360;
            var deg2 = deg1 * 2;
            var degStart = -Math.PI / 2;

            var canvas = document.getElementById(id);
            canvas.width = canvas.height = SIZE;
            var ctx = canvas.getContext('2d');

            var percent = 0;
        }
});

Answer 1

Your sample code makes me confused :-D,the code below shows the canvas,I hope it works for you:

$(function () {
    var SIZE = 200;
    var SPINNER_WIDTH = 20;
    var STEP_PERCENT = 1;
    var STEP_DELAY = 20;

    var radius, centerX, centerY;
    radius = centerX = centerY = SIZE / 2;

    var deg360 = Math.PI * 2;
    var deg60 = deg360 / 6;
    var deg30 = deg360 / 12;
    var deg1 = Math.PI / 360;
    var deg2 = deg1 * 2;
    var degStart = -Math.PI / 2;

    var Box = Backbone.Model.extend({
        defaults: {
            x: 0,
            y: 0,
            w: 1,
            h: 1,
            color: "#FF9000",
            linewidth: 3
        }});


    var BoxSet = Backbone.Collection.extend({
        model: Box
    });

    var BoxView = Backbone.View.extend({
        tagName: "canvas",
        attributes: {
            id: _.uniqueId("canvas")
        },
        percent: 0,
        render: function () {
            console.log("Rendering ==> " + this.model.get("name"));
            this.start(this.el);
            return this;
        },
        start: function (canvas) {
            canvas.width = canvas.height = SIZE;
            this.ctx = canvas.getContext('2d');
            this.animate();
        },
        animate: function () {
            var self = this, deg, i, n, from, to;
            this.ctx.width = this.ctx.height = SIZE;

            this.percent += STEP_PERCENT;
            deg = this.percent / 100 * deg360;

            this.drawArc('#aaa', radius, deg360);
            this.drawArc('#0e728e', radius, deg);
            for (i = 0, n = Math.floor(deg / deg60); i < n; i++) {
                from = i * deg30 + deg2;
                to = from + deg30 - deg2 * 2
                this.drawArc('#250696', radius, to, from);
            }
            this.drawArc('#fff', radius - SPINNER_WIDTH, deg360);

            if (this.percent >= 100) {
                document.getElementById('text').innerText = 'FINISHED';
            } else {
                setTimeout(function () {
                    self.animate();
                }, STEP_DELAY);
            }
        },
        drawArc: function (color, arcRadius, degTo, degFrom) {
            if (!degFrom) {
                degFrom = 0;
            }
            this.ctx.fillStyle = color;
            this.ctx.beginPath();
            this.ctx.moveTo(centerX, centerY);
            this.ctx.arc(centerX, centerY, arcRadius, degStart + degFrom, degStart + degTo, false);
            this.ctx.lineTo(centerX, centerY);
            this.ctx.fill();
        }

    });

    var BoxSetView = Backbone.View.extend({
        className: "container",
        render: function () {
            this.collection.each(function (model) {
                var boxView = new BoxView({model: model});
                this.$el.append(boxView.render().$el)
            }, this);
            return this;
        }
    });


    var c = new BoxSet([
        {
            name: "canvas1"
        },
        {
            name: "canvas2"
        },
        {
            name: "canvas3"
        },
        {
            name: "canvas4"
        }
    ]);
    var v = new BoxSetView({
        collection: c
    });
    $("body").append(v.render().$el);
});