Optionalscope: string | FunctionOptionalparent: HTMLElementelement that the canvas will be placed inside
🧮 Calculates the absolute value of a number.
a number
absolute value of the number
🧮 Sets the mode for interpreting and drawing angles. Can be either 'degrees' or 'radians'.
mode to set for angle interpretation
🦋 Applies a transformation matrix.
Accepts a 3x3 matrix as either an array or multiple arguments.
Note that in q5 WebGPU, the identity matrix (default) has a negative y scale to flip the y-axis to match the Canvas2D renderer.
🎨 Draws over the entire canvas with a color or image.
Like the color function,
this function can accept colors in a wide range of formats:
CSS color string, grayscale value, and color component values.
💅 Set the global composite operation for the canvas context.
Not available in q5 WebGPU.
composite operation
⭐ Creates a canvas element, a section of the screen your program can draw on.
Run this function to start using q5!
Note that in this example, the circle is located at position [0, 0], the origin of the canvas.
Optionalw: numberwidth or side lengths of the canvas
Optionalh: numberheight of the canvas
Optionaloptions: objectcanvas element
🧑🎨 Draws a capsule.
x-coordinate of the first point
y-coordinate of the first point
x-coordinate of the second point
y-coordinate of the second point
radius of the capsule semi-circle ends
🛠 Clears all items from localStorage.
🎨
Creates a new Color object, which is primarily useful for storing
a color that your sketch will reuse or modify later.
With the default color mode, RGB, colors have r/red, g/green,
b/blue, and a/alpha components.
The fill, stroke, and background
functions accept the same wide range of color representations as this function.
The default color format is "float", so set color components to values between 0 and 1.
Here are some examples of valid use:
color(1) (grayscale)color(1, 0.8) (grayscale, alpha)color(1, 0, 0) (r, g, b)color(1, 0, 0, 0.1) (r, g, b, a)color('red') (colorName)color('#ff0000') (hexColor)color([1, 0, 0]) (colorComponents)color or first color component
Optionalc1: numbersecond color component
Optionalc2: numberthird color component
Optionalc3: numberfourth color component (alpha)
a new Color object
await Canvas(200);
rect(-100, -100, 100, 200);
// ( r, g, b, a)
let bottle = color(0.35, 0.39, 1, 0.4);
fill(bottle);
stroke(bottle);
strokeWeight(30);
circle(0, 0, 155);
🎨 Sets the color mode for the sketch, which changes how colors are interpreted and displayed.
Color gamut is 'display-p3' by default, if the device supports HDR.
The default color mode is RGB in float format.
color mode
color format (1 for float, 255 for integer)
Optionalgamut: "srgb" | "display-p3"color gamut
🧮 Constrains a value between a minimum and maximum value.
number to constrain
lower bound
upper bound
constrained value
📑 Creates a link element.
url
Optionaltext: stringtext content
📑 Creates a capture from a connected camera, such as a webcam.
The capture video element can be hidden and its content can be
displayed on the canvas using the image function.
Can preload to ensure the capture is ready to use when your sketch starts.
Requests the highest video resolution from the user facing camera
by default. The first parameter to this function can be used to
specify the constraints for the capture. See getUserMedia
for more info.
Optionaltype: stringtype of capture, can be only VIDEO or only AUDIO, the default is to use both video and audio
Optionalflipped: booleanwhether to mirror the video vertically, true by default
a new video element
📑 Creates a checkbox element.
Use the checked property to get or set the checkbox's state.
The label property is the text label element next to the checkbox.
Optionallabel: stringtext label placed next to the checkbox
Optionalchecked: booleaninitial state
📑 Creates a color input element.
Use the value property to get or set the color value.
Optionalvalue: stringinitial color value
📑
Creates a new HTML element and adds it to the page. createElement is
an alias.
Modify the element's CSS style to change its appearance.
Use addEventListener to respond to events such as:
q5 adds some extra functionality to the elements it creates:
position function makes it easy to place the element
relative to the canvassize function sets the width and height of the elementx, y, width, and height propertiestag name of the element
Optionalcontent: stringcontent of the element
element
📑 Creates an input element.
Use the value property to get or set the input's value.
Use the placeholder property to set label text that appears
inside the input when it's empty.
See MDN's input documentation for the full list of input types.
Optionalvalue: stringinitial value
Optionaltype: stringtext input type, can be 'text', 'password', 'email', 'number', 'range', 'search', 'tel', 'url'
📑 Creates a radio button group.
Use the option(label, value) function to add new radio buttons
to the group.
Use the value property to get or set the value of the selected radio button.
OptionalgroupName: string🎞 Creates a recorder. Simply hit record to start recording!
The following properties can be set via the recorder UI or programmatically.
format is set to "H.264" by default.bitrate is a number in megabits per second (mbps). Its default
value is determined by the height of the canvas. Increasing the
bitrate will increase the quality and file size of the recording.captureAudio is set to true by default. Set to false to disable
audio recording.Note that recordings are done at a variable frame rate (VFR), which makes the output video incompatible with some editing software. For more info, see the "Recording the Canvas". wiki page.
a recorder, q5 DOM element
📑 Creates a select element.
Use the option(label, value) function to add new options to
the select element.
Set multiple to true to allow multiple options to be selected.
Use the value property to get or set the selected option value.
Use the selected property get the labels of the selected
options or set the selected options by label. Can be a single
string or an array of strings.
Optionalplaceholder: stringoptional placeholder text that appears before an option is selected
📑 Creates a slider element.
Use the value property to get or set the slider's value.
Use the val function to get the slider's value as a number.
minimum value
maximum value
Optionalvalue: numberinitial value
Optionalstep: numberstep size
📘 Creates an image from a string of text.
string of text
OptionalwrapWidth: numbermaximum line width in characters
OptionallineLimit: numbermaximum number of lines
an image object representing the rendered text
📑 Creates a video element.
Note that videos must be muted to autoplay and the play and
pause functions can only be run after a user interaction.
The video element can be hidden and its content can be
displayed on the canvas using the image function.
url of the video
a new video element
🖲 Sets the cursor to a CSS cursor type or image. If an image is provided, optional x and y coordinates can specify the active point of the cursor.
name of the cursor or the url to an image
Optionalx: numberx-coordinate of the cursor's point
Optionaly: numbery-coordinate of the cursor's point
🛠 Returns the current day of the month.
current day
🌆 Sets the default image scale, which is applied to images when they are drawn without a specified width or height.
By default it is 0.5 so images appear at their actual size when pixel density is 2. Images will be drawn at a consistent default size relative to the canvas regardless of pixel density.
This function must be called before images are loaded to have an effect.
default image scale
🧮 Converts radians to degrees.
angle in radians
angle in degrees
🎞 Discards the current recording.
🛠
Disables the automatic preloading of assets before draw starts looping. This allows draw to start immediately, and assets can be lazy loaded or loadAll() can be used to wait for assets to finish loading later.
💻 Customize how your canvas is presented.
NORMAL, CENTER, or MAXED
SMOOTH or PIXELATED
can also be given as a string (for example "x2")
🧮 Calculates the distance between two points.
This function also accepts two objects with x and y properties.
x-coordinate of the first point
y-coordinate of the first point
x-coordinate of the second point
y-coordinate of the second point
distance between the points
🧑🎨
Set to CENTER (default), RADIUS, CORNER, or CORNERS.
Changes how the first four inputs to
ellipse, circle, and arc are interpreted.
await Canvas(200, 100);
background(0.8);
ellipseMode(CENTER);
// (x, y, w, h)
ellipse(0, 0, 100, 50);
await Canvas(200, 100);
background(0.8);
ellipseMode(RADIUS);
// (x, y, rX, rY)
ellipse(0, 0, 50, 25);
💅 Sets the canvas to erase mode, where shapes will erase what's underneath them instead of drawing over it.
Not available in q5 WebGPU.
OptionalfillAlpha: numberopacity level of the fill color
OptionalstrokeAlpha: numberopacity level of the stroke color
🧮 Calculates e raised to the power of a number.
power to raise e to
e raised to the power of exponent
💅 Sets the fill color. The default is white.
Like the color function, this function
can accept colors in a wide range of formats: as a CSS color string,
a Color object, grayscale value, or color component values.
🌆 Applies a filter to the image.
See the documentation for q5's filter constants below for more info.
A CSS filter string can also be used. https://developer.mozilla.org/docs/Web/CSS/filter
Not applicable to WebGPU canvases.
filter type or a CSS filter string
Optionalvalue: numberoptional value, depends on filter type
📑 Finds the first element in the DOM that matches the given CSS selector.
Alias for document.querySelector.
element
📑 Finds all elements in the DOM that match the given CSS selector.
Alias for document.querySelectorAll.
elements
🧮 Calculates the fractional part of a number.
a number
fractional part of the number
💻 Sets the target frame rate or gets an approximation of the sketch's current frame rate.
Even when the sketch is running at a consistent frame rate, the current frame rate value will fluctuate. Use your web browser's developer tools for more accurate performance analysis.
Optionalhertz: numbertarget frame rate, default is 60
current frame rate
💻 Enables or disables fullscreen mode.
Optionalv: booleanboolean indicating whether to enable or disable fullscreen mode
🌆 Retrieves a subsection of an image or canvas as a new Q5 Image or the color of a pixel in the image or canvas.
If only x and y are specified, this function returns the color of the pixel
at the given coordinate in [R, G, B, A] array format. If loadPixels
has never been run, it's run by this function.
If you make changes to the canvas or image, you must call loadPixels
before using this function to get current color data.
Not applicable to WebGPU canvases.
Optionalw: numberwidth of the area, default is 1
Optionalh: numberheight of the area, default is 1
🔊 Returns the AudioContext in use or undefined if it doesn't exist.
AudioContext instance
💻 Gets the current FPS, in terms of how many frames could be generated in one second, which can be higher than the target frame rate.
Use your web browser's developer tools for more in-depth performance analysis.
frames per second
🛠 Retrieves an item from localStorage.
key of the item to retrieve
value of the retrieved item
🛠 Returns the current hour.
current hour
🌆 Draws an image or video frame to the canvas.
🌆
Set to CORNER (default), CORNERS, or CENTER.
Changes how inputs to image are interpreted.
await Canvas(200);
let logo = load('/q5js_logo.avif');
q5.draw = function () {
imageMode(CORNER);
// ( img, x, y, w, h)
image(logo, -50, -50, 100, 100);
};
💅 Checks if a given point is within the current path's fill area.
Not available in q5 WebGPU.
x-coordinate of the point
y-coordinate of the point
true if the point is within the fill area, false otherwise
🌆 Displays a region of the image on another region of the image. Can be used to create a detail inset, aka a magnifying glass effect.
x-coordinate of the source region
y-coordinate of the source region
width of the source region
height of the source region
x-coordinate of the destination region
y-coordinate of the destination region
width of the destination region
height of the destination region
💅 Checks if a given point is within the current path's stroke.
Not available in q5 WebGPU.
x-coordinate of the point
y-coordinate of the point
true if the point is within the stroke, false otherwise
🧮 Generates a random number within a symmetric range around zero.
Can be used to create a jitter effect (random displacement).
Equivalent to random(-amount, amount).
Optionalamount: numberabsolute maximum amount of jitter, default is 1
random number between -val and val
🖲 Returns true if the user is pressing the specified key, false otherwise. Accepts case-insensitive key names.
key to check
true if the key is pressed, false otherwise
🧮 Calculates a number between two numbers at a specific increment.
first number
second number
amount to interpolate between the two values
interpolated number
🧑🎨 Draws a line on the canvas.
To draw lines with rounded stroke caps, use capsule instead.
x-coordinate of the first point
y-coordinate of the first point
x-coordinate of the second point
y-coordinate of the second point
🛠 Loads a file or multiple files.
File type is determined by file extension. q5 supports loading text, json, csv, font, audio, and image files.
By default, assets are loaded in parallel before q5 runs draw. Use await to wait for assets to load.
a promise that resolves with objects
await Canvas(200);
let logo = load('/q5js_logo.avif');
q5.draw = function () {
image(logo, -100, -100, 200, 200);
};
await Canvas(200);
background(0.8);
await load('/assets/Robotica.ttf');
textSize(28);
text('Hello, world!', -97, 100);
🛠 Wait for any assets that started loading to finish loading. By default q5 runs this before looping draw (which is called preloading), but it can be used even after draw starts looping.
a promise that resolves with loaded objects
🔊 Loads audio data from a file and returns an HTMLAudioElement.
Audio is considered loaded when the canplaythrough event is fired.
Note that audio can only be played after the first user interaction with the page!
🛠 Loads a CSV file from the specified url.
Using await to get the loaded CSV as an array of objects is recommended.
CSV file
an array of objects containing the loaded CSV
📘 Loads a font from a URL.
The first example below loads Robotica.
The second example loads Pacifico from Google fonts.
By default, assets are loaded in parallel before q5 runs draw. Use await to wait for a font to load.
Fonts in MSDF format with the file ending "-msdf.json" can be used for high performance text rendering. Make your own using the MSDF font converter.
If no fonts are loaded, q5 WebGPU will lazy load the default MSDF font from q5js.org. Until it is loaded, the system's default sans-serif font will be used via textImage.
URL of the font to load
font
🛠 Loads a JSON file from the specified url.
Using await to get the loaded JSON object or array is recommended.
JSON file
an object or array containing the loaded JSON
🌆
Loads pixel data into pixels from the canvas or image.
The example below sets some pixels' green channel to a random value.
Not applicable to WebGPU canvases.
🔊
Loads audio data from a file and returns a Sound object.
Use functions like play, pause, and stop to
control playback. Note that sounds can only be played after the
first user interaction with the page!
Set volume to a value between 0 (silent) and 1 (full volume).
Set pan to a value between -1 (left) and 1 (right) to adjust
the sound's stereo position. Set loop to true to loop the sound.
Use loaded, paused, and ended to check the sound's status.
The entire sound file must be loaded before playback can start, use await to wait for a sound to load. To stream larger audio files use the loadAudio function instead.
sound file
sound
🛠 Loads a text file from the specified url.
Using await to get the loaded text as a string is recommended.
text file
an object containing the loaded text in the property obj.text or use await to get the text string directly
🛠 Loads an xml file from the specified url.
Using await to get the loaded XML Element is recommended.
xml file
an object containing the loaded XML Element in a property called obj.DOM or use await to get the XML Element directly
⭐ Logs a message to the JavaScript console.
To view the console, open your browser's web developer tools
via the keyboard shortcut Ctrl + Shift + i or command + option + i,
then click the "Console" tab.
Use log when you're curious about what your code is doing!
🧮 Calculates the natural logarithm (base e) of a number.
a number
natural logarithm of the number
🧮 Maps a number from one range to another.
incoming value to be converted
lower bound of the value's current range
upper bound of the value's current range
lower bound of the value's target range
upper bound of the value's target range
mapped value
🛠 Returns the current minute.
current minute
🖲 Define this function to respond to mouse wheel events.
event.deltaX and event.deltaY are the horizontal and vertical
scroll amounts, respectively.
Return true to allow the default behavior of scrolling the page.
📘 Number formatter, can be used to display a number as a string with a specified number of digits before and after the decimal point, optionally adding padding with zeros.
a string representation of the number, formatted accordingly
🛠 nf is short for number format. It formats a number to a string with a specified number of digits.
number to format
number of digits to format to
formatted number
💅 Resets the canvas from erase mode to normal drawing mode.
Not available in q5 WebGPU.
🧮 Generates a noise value based on the x, y, and z inputs.
Uses Perlin Noise by default.
Optionalx: numberx-coordinate input
Optionaly: numbery-coordinate input
Optionalz: numberz-coordinate input
a noise value
🧮 Sets the level of detail for noise generation.
level of detail (number of octaves)
falloff rate for each octave
🧮 Sets the noise generation mode.
Only the default mode, "perlin", is included in q5.js. Use of the other modes requires the q5-noiser module.
noise generation mode
🧮 Sets the seed value for noise generation.
seed value
🧮 Normalizes a number from another range into a value between 0 and 1.
number to normalize
lower bound of the range
upper bound of the range
normalized number
💅 Disables the shadow effect.
Not available in q5 WebGPU.
🌆 Images drawn after this function is run will not be tinted.
💅
Sets the global opacity, which affects all subsequent drawing operations, except background. Default is 1, fully opaque.
In q5 WebGPU this function only affects images.
opacity level, ranging from 0 to 1
🎞 Pauses the canvas recording, if one is in progress.
🖲 Requests that the pointer be locked to the document body, hiding the cursor and allowing for unlimited movement.
Operating systems enable mouse acceleration by default, which is useful when you sometimes want slow precise movement (think about you might use a graphics package), but also want to move great distances with a faster mouse movement (think about scrolling, and selecting several files). For some games however, raw mouse input data is preferred for controlling camera rotation — where the same distance movement, fast or slow, results in the same rotation.
To exit pointer lock mode, call document.exitPointerLock().
set to true to disable OS-level mouse acceleration and access raw mouse input
🧮 Calculates the value of a base raised to a power.
For example, pow(2, 3) calculates 2 _ 2 _ 2 which is 8.
base
exponent
base raised to the power of exponent
💅 Saves the current drawing style settings.
This includes the fill, stroke, stroke weight, tint, image mode, rect mode, ellipse mode, text size, text align, text baseline, and shadow settings.
🧮 Converts degrees to radians.
angle in degrees
angle in radians
🧮 Generates a random value.
Return value can be the lower bound but can never exactly be the upper bound.
Optionallow: number | any[]lower bound (inclusive) or an array
Optionalhigh: numberupper bound (exclusive)
a random number or element
🧮 Generates a random number following an exponential distribution.
a random number following an exponential distribution
🧮 Generates a random number following a Gaussian (normal) distribution.
mean (center) of the distribution
standard deviation (spread or "width") of the distribution
a random number following a Gaussian distribution
🧮 Sets the random number generation method.
method to use for random number generation
🧮 Sets the seed for the random number generator.
seed value
🎞 Starts recording the canvas or resumes recording if it was paused.
If no recorder exists, one is created but not displayed.
🧑🎨 Draws a rectangle or a rounded rectangle.
Also accepts 8 parameters to specify a corner radius for each corner, in the order: top-left, top-right, bottom-right, bottom-left.
x-coordinate
y-coordinate
width of the rectangle
height of the rectangle
Optionalrounded: numberradius for all corners
🧑🎨
Set to CORNER (default), CENTER, RADIUS, or CORNERS.
Changes how the first four inputs to
rect and square are interpreted.
await Canvas(200, 100);
background(0.8);
rectMode(CORNER);
// ( x, y, w, h)
rect(-50, -25, 100, 50);
await Canvas(200, 100);
background(0.8);
rectMode(CENTER);
// (cX, cY, w, h)
rect(0, 0, 100, 50);
💻 Redraws the canvas n times. If no input parameter is provided, it calls the draw function once.
This is an async function.
Optionaln: numbernumber of times to redraw the canvas, default is 1
🛠 Removes an item from localStorage.
key of the item to remove
🦋 Resets the transformation matrix.
q5 runs this function before every time the draw function is run,
so that transformations don't carry over to the next frame.
💻 Resizes the canvas to the specified width and height.
width of the canvas
height of the canvas
🛠 Saves data to a file.
If data is not specified, the canvas will be saved.
If no arguments are provided, the canvas will be saved as an image file named "untitled.png".
Optionaldata: objectcanvas, image, or JS object
OptionalfileName: stringfilename to save as
🦋 Scales the drawing context.
If only one input parameter is provided, the drawing context will be scaled uniformly.
scaling factor along the x-axis
Optionaly: numberscaling factor along the y-axis
🛠 Returns the current second.
current second
🌆 Sets a pixel's color in the image or canvas. Color mode must be RGB.
Or if a canvas or image is provided, it's drawn on top of the destination image or canvas, ignoring its tint setting.
Run updatePixels to apply the changes.
Not applicable to WebGPU canvases.
color, canvas, or image
💅 Sets the shadow color. The default is transparent (no shadow).
Shadows apply to anything drawn to the canvas, including filled shapes, strokes, text, and images.
Like the color function, this function
can accept colors in a wide range of formats: as a CSS color string,
a Color object, grayscale value, or color component values.
Not available in q5 WebGPU.
shadow color
💅 Sets the shadow offset and blur radius.
When q5 starts, shadow offset is (10, 10) with a blur of 10.
Not available in q5 WebGPU.
horizontal offset of the shadow
vertical offset of the shadow, defaults to be the same as offsetX
blur radius of the shadow, defaults to 0
🛠 Shuffles the elements of an array.
array to shuffle
shuffled array
🌆
Enables smooth rendering of images displayed larger than
their actual size. This is the default setting, so running this
function only has an effect if noSmooth has been called.
🧮 Calculates the square of a number.
number to square
square of the number
🧮 Calculates the square root of a number.
a number
square root of the number
🧑🎨 Draws a square or a rounded square.
Also accepts 7 parameters to specify a corner radius for each corner, in the order: top-left, top-right, bottom-right, bottom-left.
x-coordinate
y-coordinate
size of the sides of the square
Optionalrounded: numberradius for all corners
🛠 Stores an item in localStorage.
key under which to store the item
value to store
💅 Sets the stroke (outline) color. The default is black.
Like the color function, this function
can accept colors in a wide range of formats: as a CSS color string,
a Color object, grayscale value, or color component values.
💅
Set the line join style to ROUND or MITER.
The default is MITER.
line join style
📘 Renders text on the canvas.
string of text to display
x-coordinate of the text's position
y-coordinate of the text's position
OptionalwrapWidth: numbermaximum line width in characters
OptionallineLimit: numbermaximum number of lines
📘 Sets the horizontal and vertical alignment of text.
Alignment constants like CENTER can be used with this function.
horizontal alignment
Optionalvert: "top" | "middle" | "bottom" | "alphabetic"vertical alignment
📘 Calculates and returns the ascent (the distance from the baseline to the top of the highest character) of the current font.
string to measure
ascent of the text in pixels
📘 Calculates and returns the descent (the distance from the baseline to the bottom of the lowest character) of the current font.
string to measure
descent of the text in pixels
📘 Sets the current font to be used for rendering text.
By default, the font is set to the CSS font family "sans-serif" or the last font loaded.
name of the font family or a FontFace object
📘 Renders an image generated from text onto the canvas.
If the first parameter is a string, an image of the text will be created and cached automatically.
The positioning of the image is affected by the current text alignment and baseline settings.
This function can be used to draw emojis, which can not be drawn with MSDF text rendering.
Using this function to draw text that changes every frame has a very high performance cost.
image or text
x-coordinate where the image should be placed
y-coordinate where the image should be placed
📘 Sets or gets the current line height. If no argument is provided, returns the current line height.
Optionalleading: numberline height in pixels
current line height when no argument is provided
📘 Sets or gets the current font size. If no argument is provided, returns the current font size.
Optionalsize: numbersize of the font in pixels
current font size when no argument is provided
📘 Sets the current text style.
Not applicable to MSDF fonts.
font style
📘 Converts a string of text to an array of points.
Samples opaque pixels in a text image made with createTextImage.
It's influenced by text settings, such as font, size, and alignment.
Uses a Z-order curve to improve spatial distribution, which preserves the shape of text better than purely random sampling.
string of text
Optionalx: numberx coordinate of the text position
Optionaly: numbery coordinate of the text position
OptionalsampleRate: numberlower values increase dithering (1 = all points, 0.1 = ~10% of points)
Optionaldensity: numberpixel density of the text
📘 Sets the text weight.
font weight
📘 Calculates and returns the width of a given string of text.
string to measure
width of the text in pixels
🌆 Applies a tint (color overlay) to the drawing.
The alpha value of the tint color determines the
strength of the tint. To change an image's opacity,
use the opacity function.
Tinting affects all subsequent images drawn. The tint color is applied to images using the "multiply" blend mode.
Since the tinting process is performance intensive, each time
an image is tinted, q5 caches the result. image will draw the
cached tinted image unless the tint color has changed or the
image being tinted was edited.
If you need to draw an image multiple times each frame with different tints, consider making copies of the image and tinting each copy separately.
tint color
🖲 Define this function to respond to touch down events on the canvas.
Return true to enable touch gestures like pinch-to-zoom and scroll, which q5 disables on the canvas by default.
🖲 Define this function to respond to touch move events on the canvas.
Return true to enable touch gestures like pinch-to-zoom and scroll, which q5 disables on the canvas by default.
🖲 Define this function to respond to touch down events on the canvas.
Return true to enable touch gestures like pinch-to-zoom and scroll, which q5 disables on the canvas by default.
🌆
Applies changes in the pixels array to the canvas or image.
Not applicable to WebGPU canvases.
🔊 Creates a new AudioContext or resumes it if it was suspended.
a promise that resolves when the AudioContext is resumed
🛠 Returns the current year.
current year
Staticcanvas⚙
Sets the default canvas context attributes used for newly created
canvases and internal graphics. These options are overwritten by any
per-canvas options you pass to Canvas.
Staticdisable⚙ Turn off q5's friendly error messages.
Staticerror⚙ Set to true to keep draw looping after an error.
Staticlang⚙ Set to a language code other than 'en' (English) to use q5 in an additional language.
Currently supported languages:
StaticMAX_⚙ A WebGPU memory allocation limit.
The maximum number of text characters that can be drawn per frame.
StaticMAX_⚙ A WebGPU memory allocation limit.
The maximum number of ellipses
(calls to ellipse, circle, and arc)
that can be drawn per frame.
StaticMAX_⚙ A WebGPU memory allocation limit.
The maximum number of rectangles
(calls to rect, square, capsule)
that can be drawn per frame.
StaticMAX_⚙ A WebGPU memory allocation limit.
The maximum number of separate calls to text
that can be drawn per frame.
StaticMAX_⚙ A WebGPU memory allocation limit.
The maximum number of transformation matrixes that can be used per frame.
Staticmodules⚙ An object containing q5's modules, functions that run when q5 loads.
Each function receives two input parameters:
Staticsupports⚙ True if the device supports HDR (the display-p3 colorspace).
Staticversion⚙ The current minor version of q5.
Staticadd⚙ Addons can augment q5 with new functionality by adding hooks, functions to be run at specific phases in the q5 lifecycle.
Inside the function, this refers to the Q5 instance.
'init', 'presetup', 'postsetup', 'predraw', 'postdraw', or 'remove'
The function to be run at the specified lifecycle phase.
Staticdraw⚙ The q5 draw function is run 60 times per second by default.
Staticpost⚙
Runs after each draw function call and post-draw q5 addon processes, if any.
Useful for adding post-processing effects when it's not possible
to do so at the end of the draw function, such as when using
addons like q5play that auto-draw to the canvas after the draw
function is run.
Staticregister⚙ p5.js v2 compatible way to register an addon with q5.
A function that receives Q5, Q5.prototype, and a lifecycles object.
StaticupdateStaticWeb⚙ Creates a new Q5 instance that uses q5's WebGPU renderer.
⚙ Creates an instance of Q5.
Used by the global
Canvasfunction.