You can draw text onto the canvas. To achieve that, you can use the following p5.js command:
1
text(string, x, y, [width], [height]);
First you have to put in your string, you can use a variable here or put in the string directly. Next you give a position on the canvas in pixel and if you like, you can put in a width and a height as well.
If you want to use a string directly, you will use the quotation marks, if you would like to use a variable, you use the name of the variable without any quotations.
Here is an example using a string directly:
1
text("Great work 👍", 100, 100);
Writing text with p5.js
And here is an example with a variable:
1
2
let greeting = "Hello 😀";
text(greeting, 100, 100);
Writing text with p5.js
To change the color of your text, you can use the fill command that we already know:
1
2
fill(255, 0, 255);
text("Super awesome 🍪", 100, 100);
Writing text with p5.js
In the p5.js reference and on your CheatSheet, you can find more possibilities to play around with text. For example, size, font, alignment and more.