# Graphics strokeRect and fillRect

**URL:** <https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378>\
**Category:** Phaser 3\
**Created:** [October 2, 2022, 9:14pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378 "2022-10-02T21:14:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MickeyKnox](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@MickeyKnox](https://phaser.discourse.group/u/MickeyKnox)\
**Post date:** [October 2, 2022, 9:14pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/1 "2022-10-02T21:14:31Z")

</div>

With this code

```javascript
let g = scene.add.graphics();
g.defaultStrokeColor = 0x000000;
g.defaultFillAlpha = 0.3;
g.defaultFillColor = 0xFFFFFF;
g.fillRect(0, 0, 32, 20);
g.strokeRect(0, 0, 32, 20);

```

I expected to get get a black rectangle outline with alpha of 1 above a white filled rectangle with alpha of 0.3.

But what I get instead is a filled black rectangle with alpha of 1. Why is this so? How can I achieve the result I expected?

---

<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 3, 2022, 6:17pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/2 "2022-10-03T18:17:02Z")

</div>

I don’t see anything drawn from that code. 🙂

I think you have to set the defaults like

```
let g = scene.add.graphics({ lineStyle: { width: 1, color: 0x000000 } });

```

etc.

---

<div class="post-metadata">

**Author:** ![MickeyKnox](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@MickeyKnox](https://phaser.discourse.group/u/MickeyKnox)\
**Post date:** [October 4, 2022, 10:13pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/3 "2022-10-04T22:13:52Z")

</div>

Actually I generate a texture from that code and apply that to an image.

```javascript
let g = scene.add.graphics().lineStyle(1, 0x000000);
g.defaultFillAlpha = 0.3;
g.defaultFillColor = 0xFFFFFF;
//g.fillRect(0, 0, 32, 20);
g.strokeRect(0, 0, 32, 20);

```

This code does draw a black rectangle outline, just as I would expect.

(The `lineStyle` values are the default values as far as I understand it, setting them explicitly shouldn’t make a difference.)

However, as soon as I uncomment `g.fillRect(...)`, the whole thing becomes solid black. Does that somehow make sense? The color is explicitly set to white and alpha to 0.3. So why is it going black?

I can’t help but think that there is something wrong with `fillRect`.

---

<div class="post-metadata">

**Author:** ![MickeyKnox](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@MickeyKnox](https://phaser.discourse.group/u/MickeyKnox)\
**Post date:** [October 4, 2022, 10:20pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/4 "2022-10-04T22:20:55Z")

</div>

Interestingly, if I reverse the colors, thus drawing the rectangle outline white and the fill rect black, the white rectangle is drawn above the black filled rectangle. The alpha value is still ignored though.

---

<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 4, 2022, 11:09pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/5 "2022-10-04T23:09:20Z")

</div>

You mustn’t set `defaultFillAlpha` etc. directly. Nothing will happen. You have to pass the defaults in `graphics()`:

```javascript
let g = this.add.graphics({
    fillStyle: { color: 0xffffff, alpha: 0.3 },
    lineStyle: { color: 0x000000 }
});
g.fillRect(0, 0, 32, 20);
g.strokeRect(0, 0, 32, 20);

```

Or don’t use the defaults:

```javascript
let g = this.add.graphics();
g.fillStyle(0xffffff, 0.3).fillRect(0, 0, 32, 20);
g.lineStyle(1, 0x000000).strokeRect(0, 0, 32, 20);

```

Both these code samples draw correctly for me.

---

<div class="post-metadata">

**Author:** ![MickeyKnox](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@MickeyKnox](https://phaser.discourse.group/u/MickeyKnox)\
**Post date:** [October 4, 2022, 11:45pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/6 "2022-10-04T23:45:33Z")

</div>

Thank you. I can confirm this draws correctly.

The defaultXXX properties are read-only then and not ment to be set?

---

<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 5, 2022, 4:22pm UTC](https://phaser.discourse.group/t/graphics-strokerect-and-fillrect/12378/7 "2022-10-05T16:22:05Z")

</div>

They are read-only, yes.