# Unexpected strokes are shown on P2D PGraphics

**URL:** <https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660>\
**Category:** Coding Questions\
**Created:** [June 7, 2020, 3:43pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660 "2020-06-07T15:43:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Reva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reva/32/9561_2.png) [@Reva](https://discourse.processing.org/u/Reva)\
**Post date:** [June 7, 2020, 3:43pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/1 "2020-06-07T15:43:50Z")

</div>

Hi~I tried to draw custom shapes(hexagon) on a transparent P2D PGraphics for later I would change the background color. I don’t want any strokes, but there are unexpected outlines of the shapes shown on the P2D PGraphic.  
 ![p](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/338a6788cfe6be026c2c133167e35020ec76c3ed.png)  
The buttom left hexagon is the shape which follows the mouse, others are drawn on the P2D PGraphics that slightly have outlines.  
If I use normal PGraphics, there will be no strokes and that’s what I want. But I have to use P2D for some further reasons. I hope that someone can help me figuring out the problem. Here are the codes:

```auto
PShape hexagon;
PGraphics pg;

void setup(){
  size(400,400,P2D);
  smooth(8);
  
  hexagon = createShape();
  hexagon.setFill(color(239, 237, 220)); 
  hexagon.setStroke(false);
  hexagon.beginShape();
  for (int i = 0; i < 6; i++) {
    float angle = i * PI/3 + PI/6;
    hexagon.vertex(cos(angle) * 50, sin(angle)*50);
  }
  hexagon.endShape(CLOSE);
  
  pg = createGraphics(width,height,P2D);
  pg.smooth(8);
  pg.beginDraw();
  pg.noStroke();
  pg.endDraw();
}

void draw(){
  background(255);
  image(pg,0,0);
  shape(hexagon,mouseX,mouseY);
}

void mouseClicked(){
  pg.beginDraw();
  pg.shape(hexagon,mouseX,mouseY);
  pg.endDraw();
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 7, 2020, 4:27pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/2 "2020-06-07T16:27:44Z")

</div>

I am not sure if this is the correct way or a hack, but I have found at times I have to make the stroke transparent with `.setStroke(color(0,0))`. Same with filling shapes too.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 7, 2020, 4:35pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/3 "2020-06-07T16:35:31Z")

</div>

Hello,

I have had this issue before…

Try this:

With P2D or P3D renderer:

```auto
noSmooth();
size(400, 400, P2D);
pg = createGraphics(width, height, P2D);

```

With default renderer:

```auto
size(400, 400);
pg = createGraphics(width, height);

```

`:)`

---

<div class="post-metadata">

**Author:** ![Reva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reva/32/9561_2.png) [@Reva](https://discourse.processing.org/u/Reva)\
**Post date:** [June 7, 2020, 4:35pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/4 "2020-06-07T16:35:46Z")

</div>

I’ve tried the way you said, as below:

```auto
void mouseClicked(){
  pg.beginDraw();
  hexagon.setStroke(color(0,0));
  pg.shape(hexagon,mouseX,mouseY);
  pg.endDraw();
}

```

unfortunately it doesn’t work 😢

---

<div class="post-metadata">

**Author:** ![Reva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reva/32/9561_2.png) [@Reva](https://discourse.processing.org/u/Reva)\
**Post date:** [June 7, 2020, 4:40pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/5 "2020-06-07T16:40:52Z")

</div>

Yes! It works! Thanks a lot ~~~ 😄  
I’ve edited as below：

```auto
pg = createGraphics(width,height,P2D);
pg.noSmooth();

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 7, 2020, 4:46pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/6 "2020-06-07T16:46:38Z")

</div>

Sorry, I did not look close enough, did not realize you were using PGraphics as well. Either way I would not have guessed that was due to smoothing. Glad you got it resolved.

---

<div class="post-metadata">

**Author:** ![Reva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reva/32/9561_2.png) [@Reva](https://discourse.processing.org/u/Reva)\
**Post date:** [June 7, 2020, 4:51pm UTC](https://discourse.processing.org/t/unexpected-strokes-are-shown-on-p2d-pgraphics/21660/8 "2020-06-07T16:51:32Z")

</div>

Thanks for your help anyway. It’s surprising that I received your reply so soon 😊