# Phaser line of sight polygon and the "negative" invisible polygon

**URL:** <https://phaser.discourse.group/t/phaser-line-of-sight-polygon-and-the-negative-invisible-polygon/7187>\
**Category:** Phaser 3\
**Created:** [August 14, 2020, 11:13pm UTC](https://phaser.discourse.group/t/phaser-line-of-sight-polygon-and-the-negative-invisible-polygon/7187 "2020-08-14T23:13:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![BdR](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bdr/32/2621_2.png) [@BdR](https://phaser.discourse.group/u/BdR)\
**Post date:** [August 14, 2020, 11:13pm UTC](https://phaser.discourse.group/t/phaser-line-of-sight-polygon-and-the-negative-invisible-polygon/7187/1 "2020-08-14T23:13:16Z")

</div>

I’m looking at this [Line of sight code](https://github.com/byronknoll/visibility-polygon-js) and managed to get it to work with Phaser3. It works similar to [the demo](http://www.byronknoll.com/visibility.html), so when you move a sprite with the mouse it will draw a yellow polygon for the visible area, see screenshot below.

 ![phaser line of sight](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3895d2f2e3528077654df282063e5373c238418f.png)

However, I would like to get the negative or the opposite polygon, so the blue area in the example screenshot. Then I could make the polygon a black fill color, so that it will block any sprites that are outside of the visible area.

What is the best way to change this polygon?  
Or is there a better way to do line-of-sight in Phaser?  
Like is there a line-of-sight plug-in maybe?

---

<div class="post-metadata">

**Author:** ![BMorearty](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bmorearty/32/6790_2.png) [@BMorearty](https://phaser.discourse.group/u/BMorearty)\
**Post date:** [November 23, 2022, 7:13am UTC](https://phaser.discourse.group/t/phaser-line-of-sight-polygon-and-the-negative-invisible-polygon/7187/2 "2022-11-23T07:13:18Z")

</div>

I know I’m two years too late, but in case anyone else has the same question and runs across this thread like I did: [polygon-tools](https://www.npmjs.com/package/polygon-tools/v/0.3.10) has a `subtract` function that does exactly what you want.

Make a polygon for the outer boundaries and subtract the yellow polygon. The result is an array of polygons representing the blue area.