Text

This video shows the basics of the text() function in real time.

Text can be displayed on the P5 canvas through use of the text() function. The functions below can be used in order to help your text look how you want it to in order to create more interesting coding examples. all of these functions can be called multiple times in order to have multiple different text styles on the canvas at one time. The text’s color can be altered with the fill() and stroke() functions respectively.

  • textAlign(): tells P5 where to align the textbox to the coordinates given the text() function. The options are RIGHT, LEFT, and CENTER.
  • textSize(): adjusts the font size of the text being drawn on the screen.
  • textFont(): changes the font of the text on the canvas to any of the universally browser supported fonts. The arguments for this function is the font name as a string. you can also give the font size as an optional argument.

Here is an example by Allison Parrish utilizing the above functions.

Here is some information on the universal web-safe fonts. Using any of these fonts will work across any internet browser you run your code on. You can experiment with additional fonts, however they may not work on every browser.

Here is an example Of P5’s text function in action.