Raycasting Visibility Not Working as Expected

[Styles2304]

I based my code off of what is seen here: http://www.emanueleferonato.com/2015/02/03/play-with-light-and-dark-using-ray-casting-and-visibility-polygons/

However, if I leave the code as is, it constantly returns null so I made some modifications to get it to work "properly". My initial attempt with only one box yielded correct results:

http://imgur.com/TtLCfAm

However, once I had a second polygon, It stops functioning as expected and starts creating extra segments that don't exist.

http://imgur.com/O6EvuMI

http://imgur.com/Xm2sBLm

http://imgur.com/PJGtX94

 

What am I doing wrong/missing here?

Here is the applicable code in create():

            this.obstacleCanvas = this.add.graphics(0, 0);
            this.obstacleCanvas.lineStyle(4, 0xFFFFFF, 1);

            this.lightCanvas = this.add.graphics(0, 0);

            this.testCanvas = this.add.graphics(0, 0);

            // Perimeter Box
            this.polygons.push([
                [-1, -1],
                [this.game.width + 1, -1],
                [this.game.width + 1, this.game.height + 1],
                [-1, this.game.height + 1]
            ]);

            var _tempPoly = this.obstacleCanvas.drawRect(200, 200, 100, 100);

            var _testPoly = this.obstacleCanvas.drawRect(500, 500, 100, 100);

            this.polygons.push([
                [200, 200],
                [200 + _tempPoly.width, 200],
                [200 + _tempPoly.width, 200 + _tempPoly.height],
                [200, 200 + _tempPoly.height]
            ]);

            this.polygons.push([
                [500, 500],
                [500 + _testPoly.width, 500],
                [500 + _testPoly.width, 500 + _testPoly.height],
                [500, 500 + _testPoly.height]
            ]);

 

in Update():

            var _visibility = this.createLightPolygon(this.game.input.activePointer.x, this.game.input.activePointer.y);
            // then we draw it
            this.testCanvas.clear();
            this.testCanvas.beginFill(0xFF0000, 1);

            this.lightCanvas.clear();

            this.lightCanvas.lineStyle(2, 0xff8800, 1);
            this.lightCanvas.beginFill(0xffff00);
            this.lightCanvas.moveTo(_visibility[0][0], _visibility[0][1]);
            for (var i = 0; i < _visibility.length; i++) {
                this.lightCanvas.lineTo(_visibility[i][0], _visibility[i][1]);

                this.testCanvas.drawCircle(_visibility[i][0], _visibility[i][1], 10);
            }
            this.lightCanvas.endFill();

            this.testCanvas.endFill();

 

And the custom function createLightPolygon():

	    createLightPolygon(x, y) {
            var _segments = VisibilityPolygon.convertToSegments(this.polygons),
                _position = [x, y];

            console.log(_segments);

            _segments = VisibilityPolygon.breakIntersections(_segments);

            /*if (VisibilityPolygon.inPolygon(_position, this.polygons[this.polygons.length - 1])) {
                return VisibilityPolygon.compute(_position, _segments);
            }
            return null;*/

            return VisibilityPolygon.compute(_position, _segments);
        }

** The commented out section is how the code appears in the tutorial but, with that in place, it returns null 100% of the time.

[Styles2304]

Ok... I found the problem but it brings up a new question. The issue is that the polygons were being given a height and width of 404 instead of the 100 that I would expect. Is there any reason for this or any way to get a meaningful width / height for a drawn rectangle like this? I also noticed that the world position is recorded a 0,0 not the start positions for the rectangles.