How to outline text?

edited May 2016 in Questions about Code

I read reference and the forum but couldn't manage to outline a text in Processing 3.1.1.

For example take:

void setup(){ size(800,800); } void draw(){ stroke(360); strokeWeight(1); fill(0); textSize(30); text("test",200,200); }

won't return an outlined text. How can I achieve that? Thanks in advance for hints or answers.


  • edited May 2016

    I think you need a library

    but it's not easy at all....

  • Processing does not use the stroke to outline fonts so you have to use the generative library suggested by Chrisir

  • size(200,200);
    for(int x = -1; x < 2; x++){
    //  for(int y = -1; y < 2; y++){
    //    text("LIKE THIS!", 20+x,20+y);
    //  }
        text("LIKE THIS!", 20+x,20);
        text("LIKE THIS!", 20,20+x);
    text("LIKE THIS!", 20,20);
  • Great wee bit of code TFGuy!

  • edited January 2017

    Yes, very neat effect.

    Here's a 10 second loop, zooming in on / scaling up @TfGuy 's outlined text trick so that you can see it render at multiple sizes:

    int tsize, tstart, tstop;
    void setup() {
      size(200, 200);
      tstart = 10;
      tstop = 200;
      tsize = tstart;
    void draw() {
      fill(255, 0, 0);
      for (int x = -1; x < 2; x++) {
        text("SCALE THIS!", x, 0);
        text("SCALE THIS!", 0, x);
      text("SCALE THIS!", 0, 0);
      if (tsize>tstop){
        tsize = tstart;
    void keyPressed(){

    This demo is a bit jittery, but you can see that the outlining works really well even at high font sizes. If you wanted to scale these borders up as well and make them thicker you would need to also parameterize the for loop -- and the number of text() draws would increase accordingly.

Sign In or Register to comment.