# Cannot add custom graphics to scene

**URL:** <https://phaser.discourse.group/t/cannot-add-custom-graphics-to-scene/3905>\
**Category:** Phaser 3\
**Created:** [October 9, 2019, 10:10am UTC](https://phaser.discourse.group/t/cannot-add-custom-graphics-to-scene/3905 "2019-10-09T10:10:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbjsdev2](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@dbjsdev2](https://phaser.discourse.group/u/dbjsdev2)\
**Post date:** [October 9, 2019, 10:10am UTC](https://phaser.discourse.group/t/cannot-add-custom-graphics-to-scene/3905/1 "2019-10-09T10:10:22Z")

</div>

I am trying to add my game objects onto my scene. The code I am using is:

> export default class WorldObject extends Phaser.GameObjects.Graphics {  
> constructor (scene, data) {  
> super(scene, data.x, data.y);
> 
> ```
> this.beginFill(0xFFFF0B);
> this.drawRect(10, 10, 20, 20);
> this.endFill();    
> 
> ```
> 
> }

In my scene I create this with

this.worldObjects = this.add.group();

let obj = new WorldObject(this);

this.worldObjects.add(obj);

However when I run this code I get the error beginFill is not a function, from within the constructor in my extended class.

Does anyone have any pointers on what I am doing wrong here?

Thanks

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 9, 2019, 6:19pm UTC](https://phaser.discourse.group/t/cannot-add-custom-graphics-to-scene/3905/2 "2019-10-09T18:19:16Z")

</div>

That looks like the Phaser 2 API. Use instead:

[https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html)

---

<div class="post-metadata">

**Author:** ![dbjsdev2](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@dbjsdev2](https://phaser.discourse.group/u/dbjsdev2)\
**Post date:** [October 9, 2019, 11:45pm UTC](https://phaser.discourse.group/t/cannot-add-custom-graphics-to-scene/3905/3 "2019-10-09T23:45:16Z")

</div>

That is the class from which my object extends, so it is definitely using the Phaser 3 API

The developer in the link below has done what I am trying to do. So it must have worked at some point. Unless this functionality has since been removed.

> [@Extended Graphics and cannot make mouse interactions work](https://phaser.discourse.group/t/extended-graphics-and-cannot-make-mouse-interactions-work/1205):
>
> I’m new to phaser and I have a custom class that extends Graphics. I want to trigger a function when the object is clicked. The code shown below draws the unit but never registers any events. If instead, I try passing “this” to setInteractive then the onClick fires any time the mouse is over any part of the canvas. Is there a way to specify a hit box for registering clicks? Thanks! class Unit extends Phaser.GameObjects.Graphics { constructor(scene, x, y, stats){ super(scene, x…

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 10, 2019, 3:47pm UTC](https://phaser.discourse.group/t/cannot-add-custom-graphics-to-scene/3905/4 "2019-10-10T15:47:04Z")

</div>

The class is right, but there are no `beginFill()` or `endFill()` methods. You need [fillRect()](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html#fillRect__anchor).