# Need help with applying proportional stroke to randomly sized text

**URL:** <https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497>\
**Category:** Coding Questions\
**Created:** [March 28, 2023, 4:35pm UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497 "2023-03-28T16:35:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![optimystery](https://avatars.discourse-cdn.com/v4/letter/o/0ea827/32.png) [@optimystery](https://discourse.processing.org/u/optimystery)\
**Post date:** [March 28, 2023, 4:35pm UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497/1 "2023-03-28T16:35:13Z")

</div>

I have a sketch at: [testing outline width - OpenProcessing](https://openprocessing.org/sketch/1881719)

A phrase is output with random size and color.  
Some proportion of the time, an outline is added, but rather than hardcoding a value, I want stroke to be proportional to the text size.

I have been trying to use ChatGPT to help, but it lacks enough context to do anything other than reorganising code that functions the same.

When I console.log:  
console.log(textSize());  
console.log(thickness);

I see a relation of 0.1 as expected.  
However, what is drawn on the canvas does not reflect that.

Any ideas?

---

<div class="post-metadata">

**Author:** ![Lillbre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lillbre/32/18325_2.png) [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Post date:** [May 1, 2023, 7:53pm UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497/2 "2023-05-01T19:53:27Z")

</div>

I am not familiar with processing and I do not really understand your code but I think you have to save correspodending textSize and strokeSize in arrays to get them together. Then you can loop through them and call on corresponding indices. I made a simple sketch in p5.js editor [p5.js Web Editor | TextandStroke (p5js.org)](https://editor.p5js.org/lillians/sketches/qn8JLirom)

---

<div class="post-metadata">

**Author:** ![optimystery](https://avatars.discourse-cdn.com/v4/letter/o/0ea827/32.png) [@optimystery](https://discourse.processing.org/u/optimystery)\
**Post date:** [May 1, 2023, 8:05pm UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497/3 "2023-05-01T20:05:07Z")

</div>

That’s very helpful, thank you!

---

<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:** [May 2, 2023, 10:24am UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497/4 "2023-05-02T10:24:52Z")

</div>

Hello @optimystery,

Sharing my exploration of this using the CanvasRenderingContext2D interface:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/7/878bc1de25068c8ec32e69fa4d2f8ccf03de2172.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/b/4b0c46f0655a918b8f2cc73a6eb1cb9e2b49f64f.png)

References:

> **[CanvasRenderingContext2D - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)**
>
> The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element.
> It is used for drawing shapes, text, images, and other objects.

I explored the reference above and experimented a bit.

`:)`

---

<div class="post-metadata">

**Author:** ![optimystery](https://avatars.discourse-cdn.com/v4/letter/o/0ea827/32.png) [@optimystery](https://discourse.processing.org/u/optimystery)\
**Post date:** [May 2, 2023, 10:41am UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497/5 "2023-05-02T10:41:21Z")

</div>

Nice, thanks. I will revisit this project soon, so this will be useful. 🙏