# Why stroke can effect text's display?

**URL:** <https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728>\
**Category:** Coding Questions\
**Created:** [February 26, 2019, 6:26am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728 "2019-02-26T06:26:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sheeeeep](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@sheeeeep](https://discourse.processing.org/u/sheeeeep)\
**Post date:** [February 26, 2019, 6:26am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/1 "2019-02-26T06:26:16Z")

</div>

Here is my example:

```auto
function setup() {
	  createCanvas(640, 480);    
}

function draw() {
    background(200)

    textSize(20)
    text("Welcome", 0, 20)

    stroke(255, 0, 0)
}

```

This is code’s preview:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/48b85927367489f7234862e6ac005f9b71b5a734.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 26, 2019, 7:11am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/2 "2019-02-26T07:11:54Z")

</div>

looks like p5.js use stroke ( and fill )

> **[reference | p5.js](https://p5js.org/reference/#/p5/text)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> Change the color of the text with the [fill()](https://p5js.org/reference/#/p5/fill) function. Change the outline of the text with the [stroke()](https://p5js.org/reference/#/p5/stroke) and [strokeWeight()](https://p5js.org/reference/#/p5/strokeWeight)functions.

and like

> **[reference | p5.js](https://p5js.org/reference/#/p5/textStyle)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

for disable use

> strokeWeight(0);

```auto
function setup() {
	createCanvas(640, 480);
	textSize(100);
	stroke(255, 0, 0);
	strokeWeight(5);
	fill(0, 255, 255);
}

function draw() {
	background(200);
	text("Welcome", 0, 100);
}

```

but if your question is:  
WHY stroke at the end of draw does (change) anything?  
yes, it defines the stroke from the second draw loop on.

---

<div class="post-metadata">

**Author:** ![sheeeeep](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@sheeeeep](https://discourse.processing.org/u/sheeeeep)\
**Post date:** [February 26, 2019, 7:29am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/3 "2019-02-26T07:29:12Z")

</div>

Yes, my question is WHY stroke at the end of draw does (change) anything? And I know that it take effect on the second loop.

Is it reasonable? Processing doesn’t do it like this.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 26, 2019, 7:36am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/4 "2019-02-26T07:36:15Z")

</div>

> [@sheeeeep](#):
>
> Processing doesn’t do it like this.

yes, with processing IDE ( JAVA mode )  
text();  
is not effected by stroke()…

even p5.js was started to do something similar like processing  
( but in the web browser )  
and both groups joined in the processing foundation,  
that are 2 groups, what try each their best to make their product better…  
what can lead to different solutions.

---

<div class="post-metadata">

**Author:** ![sheeeeep](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@sheeeeep](https://discourse.processing.org/u/sheeeeep)\
**Post date:** [February 26, 2019, 7:45am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/5 "2019-02-26T07:45:33Z")

</div>

Thanks for you explain, it’s very helpful for me.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 26, 2019, 6:55pm UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/6 "2019-02-26T18:55:52Z")

</div>

> [@sheeeeep](#):
>
> WHY stroke at the end of draw does (change) anything?

It doesn’t at first. On the firsts frame it draws black text. On the second frame, draw is called again, and the setting is still there, so it draws a red outline on the text. Then draw keeps being called, over and over, with the new setting.

To only see the first frame, add `noLoop()` to draw.

```auto
function setup() {
    createCanvas(640, 480);    
}

function draw() {
    background(200)

    textSize(20)
    text("Welcome", 0, 20)

    stroke(255, 0, 0)
    noLoop()
}

```

Here stroke does nothing, and the text stays black, because draw is never called a second time.

Note that, outside immediate mode (with no setup and draw), Processing (Java) draw order works the same way, but with fill rather than stroke.

So, this draws text, then changes text fill to red – text is black, red does nothing:

```auto
void draw(){
  background(200);
  textSize(20);
  text("Welcome", 10, 20);
  fill(255, 0, 0);
  noLoop();
}

```

…but, if you disable the noLoop line, on the second frame text will be drawn red.

---

<div class="post-metadata">

**Author:** ![sheeeeep](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@sheeeeep](https://discourse.processing.org/u/sheeeeep)\
**Post date:** [February 27, 2019, 1:52am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/7 "2019-02-27T01:52:12Z")

</div>

Thank you, but I need loop to do something. So I will choose processing.js to achieve my goal that browser can perform processing the same to IDE.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 27, 2019, 2:33am UTC](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/8 "2019-02-27T02:33:48Z")

</div>

this looks to me that you got something wrong  
@jeremydouglass wanted to help you understand basic draw loop thinking [here](https://discourse.processing.org/t/why-stroke-can-effect-texts-display/8728/5#)

the idea was NOT to tell you to use noLoop();

the thinking about draw() loop what you seem not to understand, see

> [@sheeeeep](#):
>
> Yes, my question is WHY stroke at the end of draw does (change) anything? And I know that it take effect on the second loop.

is anyhow same in all 3 processing “versions”

* * *

if your question was

> how to disable stroke for text() in p5.js

my answer was

> strokeWeight(0);