Why can't I access property directly if it is accessed by another process?

63 views Asked by At

I started to port my canvas animation to a enclosed class, but what got me really frustrated is that, for some reason my canvas context could not access an animated property like it used to. That was until, just for shits and giggles, I passed in not the property but a reference of that property (copy if you will)

I want to understand why it is a problem to access a property that is used by another process?

Note: TweenLite ticker is using requestAnimationFrame() to perform udpates.

Here is cut down code representing the issue, if I'm accessing self.props.ctxProps.angle directly the context uses initial value 0 and after animation is done the final value -1.999 * Math.PI, only when I use a reference variable context will access the intermediate values which are between 0 and -1.999 * Math.PI:

var sample = (function () {

    var self = new Object();

    self.props = {
        ctx: document.getElementById("loading-ring").getContext("2d"),
        ctxProps: {
            canvasX: 50,
            canvasY: 50,
            radius: 50,
            angle: 0.0
        }
    };

    self.updateCanvas = function () {
        // TODO: Ask stacakoverflow
        var ref_angle = self.props.ctxProps.angle;

        self.props.ctx.clearRect(0, 0, 100, 100);

        self.props.ctx.beginPath();
        self.props.ctx.moveTo(self.props.ctxProps.canvasX, self.props.ctxProps.canvasY);
        self.props.ctx.arc(
            self.props.ctxProps.canvasX,
            self.props.ctxProps.canvasY,
            self.props.ctxProps.radius, 0,
            ref_angle); // This works - Accesses the intermediate values 
            //self.props.ctxProps.angle); // This does not work - Accesses only start and end values
        self.props.ctx.fill();
    }

    self.run = function () {
        TweenLite.ticker.addEventListener('tick', self.updateCanvas);
        TweenLite.to(self.props.ctxProps, 100, { angle: -1.999 * Math.PI });
    }

    return {
        run: self.run
    }

})();
0

There are 0 answers