1

I have the following code as part of my p5.js code:

textSize(40);  
textAlign(LEFT, CENTER);  
textStyle(BOLD);  
strokeWeight(2);  
text("What does this series evaluate to?", 60, 50);

when I run this it displays: image of text as rendered on google chrome

I then have a function that allows me to click the mouse which rewrites the texts on top of the already rendered text, it is rendering it in the same place and at the same size. However it seems to make the overall rendered text thicker as so:

image of multiple overlapping texts rendered on google chrome

I don't understand how text rendered in the same place at the same size could change the overall thickness of the text. I would appreciate any explanation.

(I understand this is pointless to do and am not actually doing so in my code it just happened whilst i was testing things and caught my interest)

Community
  • 1
  • 1
Sonny Da Silva-Peters
  • 113
  • 4

1 Answers1

1

If the text has transparency on the edges to help with readability, then drawing it multiple times will draw the partially-transparent edges multiple times, making them more opaque and seemingly widening the text.

Feathercrown
  • 2,547
  • 1
  • 16
  • 30