Why can't I access the property directly if another process is accessing it?

I started to port the canvas animation to a private class, but what upset me a lot is that for some reason my context canvas

was unable to access the animated property it was used to. That was until then, just for shits and giggles, I passed not a property but a reference to that property (copy if you want)

I want to understand why the problem is accessing a property being used by another process?

Note: The TweenLite ticker uses requestAnimationFrame()

udpates to execute.

Here's a cut out of the code representing the problem, if I access self.props.ctxProps.angle

directly, context

uses the initial value 0

, and after the animation, the final value is completed -1.999 * Math.PI

, only when I use the reference variable context

will it have access to the intermediate values ​​that 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
    }

})();