Skip to content

Text

Draw Text

The drawtext function is used to draw text on the canvas with specified parameters.

1
drawtext(text, [x, y], fontSize, fontFamily, baseline, textAlign, angle, alpha);
Parameters Type Description Default Value
text string The text to be drawn. "undefined"
[x, y] number[] The coordinates [x, y] where the text will be drawn. [0, 0]
fontSize number The size of the font in pixels. 24
fontFamily string The font family to use. "sans-serif"
baseline string The text baseline: "top", "middle", "bottom", or "alphabetic". "top"
textAlign string The text alignment: "start", "end", "left", "right", or "center". "start"
angle number The rotation angle of the text in degrees. 0
alpha number The global alpha (transparency) value, between 0.0 and 1.0. 1.0

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { start, setup, clear, ctx, drawtext, loadFont, canvas } from "/source/modules/index.js"
import "/source/Addons/DefaultScreenshot.js"

setup(1920, 1080, 0.9)

let x = canvas.width / 2
let y = canvas.height / 2

window.addEventListener("pjsUpdate", () => {
    clear()
    ctx.fillStyle = "white"
    drawtext("Hello, world", [x, y], 64, "sans-serif", "middle", "center", 15, 1);
})

start()

Image

Load Font

The loadFont function asynchronously downloads a font from a provided URL and adds it to the document's fonts using the specified font family.

1
loadFont(fontFamily, fontURL);
Parameters Type Description Default Value
fontFamily string The font family name to assign to the loaded font. "undefined"
fontURL string The URL pointing to the font file to be downloaded and used. "undefined"

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { start, setup, clear, ctx, drawtext, loadFont, canvas } from "/source/modules/index.js"
import "/source/Addons/DefaultScreenshot.js"


setup(1920, 1080, 0.9)

loadFont("FiraCode", "/source/fonts/FiraCode/FiraCode-Regular.ttf")

let x = canvas.width / 2
let y = canvas.height / 2

window.addEventListener("pjsUpdate", () => {
    clear()
    ctx.fillStyle = "white"
    drawtext("Hello, world", [x, y], 64, "FiraCode", "middle", "center", 15, 1);
})

start()

Image

Fit Text

Failure

Doens't properly fit text in some cases.

Tries to fit a text with the sepecified width, height and other parameters.

Returns the fontSize tha will fit with the provided data.

1
fitText(text, width, height, fontFamily);
Parameters Type Description Default Value
text string The text . -
width number The size of the max width the text can be in. -
height number The size of the max height the text can be in. -
fontFamily string The font family used for measuring the text. -

Measure Text Width

The measureTextWidth function calculates the width of a provided text string with a specified font size and font family.

1
measureTextWidth(text, fontSize, fontFamily);
Parameters Type Description Default Value
text string The text to be measured. "undefined"
fontSize number The size of the font in pixels. 24
fontFamily string The font family used for measuring the text. "sans-serif"