A free and open-source JavaScript library for accessible creative coding
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Text rendering, font loading, text measurement, and typography control for creative text applications and user interfaces.
Functions for drawing text to the canvas with various formatting options.
/**
* Draw text to the canvas
* @param {string} str - Text string to display
* @param {number} x - X coordinate
* @param {number} y - Y coordinate
* @param {number} [x2] - Width of text box (for wrapped text)
* @param {number} [y2] - Height of text box (for wrapped text)
*/
function text(str, x, y, x2, y2);
/**
* Set the current font
* @param {string|p5.Font} font - Font name, web font, or p5.Font object
* @param {number} [size] - Font size in pixels
*/
function textFont(font, size);
/**
* Set the text size
* @param {number} size - Font size in pixels
*/
function textSize(size);
/**
* Set the text style
* @param {string} style - Text style (NORMAL, ITALIC, BOLD, BOLDITALIC)
*/
function textStyle(style);Functions for measuring text dimensions and font metrics.
/**
* Calculate the width of text string
* @param {string} str - Text string to measure
* @returns {number} Text width in pixels
*/
function textWidth(str);
/**
* Get the ascent of the current font
* @returns {number} Font ascent in pixels
*/
function textAscent();
/**
* Get the descent of the current font
* @returns {number} Font descent in pixels
*/
function textDescent();Functions for controlling text alignment, spacing, and wrapping behavior.
/**
* Set text alignment
* @param {string} horizAlign - Horizontal alignment (LEFT, CENTER, RIGHT)
* @param {string} [vertAlign] - Vertical alignment (TOP, BOTTOM, CENTER, BASELINE)
*/
function textAlign(horizAlign, vertAlign);
/**
* Set line spacing (leading) for multi-line text
* @param {number} leading - Line spacing in pixels
*/
function textLeading(leading);
/**
* Set text wrapping behavior
* @param {string} wrapStyle - Wrapping style (WORD, CHAR)
*/
function textWrap(wrapStyle);Functions for loading and working with custom fonts.
/**
* Load a font from file
* @param {string} path - Path to font file (TTF, OTF, WOFF)
* @param {function} [callback] - Success callback
* @param {function} [onError] - Error callback
* @returns {p5.Font} Font object
*/
function loadFont(path, callback, onError);Font object with advanced typography capabilities.
/**
* Font object for advanced typography
*/
class p5.Font {
/**
* Get font family name
* @returns {string} Font family name
*/
family();
/**
* Get font style
* @returns {string} Font style
*/
style();
/**
* Get font size
* @returns {number} Font size in pixels
*/
size();
/**
* Calculate width of text with this font
* @param {string} str - Text string
* @returns {number} Text width in pixels
*/
textWidth(str);
/**
* Get font ascent
* @returns {number} Font ascent
*/
textAscent();
/**
* Get font descent
* @returns {number} Font descent
*/
textDescent();
/**
* Convert text to paths/points
* @param {string} txt - Text string
* @param {number} x - X coordinate
* @param {number} y - Y coordinate
* @param {number} fontSize - Font size
* @param {object} [options] - Path options
* @returns {object} Path data
*/
textToPoints(txt, x, y, fontSize, options);
}// Text alignment constants
const LEFT = 'left';
const RIGHT = 'right';
const CENTER = 'center';
const TOP = 'top';
const BOTTOM = 'bottom';
const BASELINE = 'baseline';
// Text style constants
const NORMAL = 'normal';
const ITALIC = 'italic';
const BOLD = 'bold';
const BOLDITALIC = 'bolditalic';
// Text wrap constants
const WORD = 'word';
const CHAR = 'char';See complete usage examples and detailed typography documentation in the p5.js reference.
Install with Tessl CLI
npx tessl i tessl/npm-p5