Methods

abs(n) → {number}

returns the absolute value of a number

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

acos(ang) → {number}

returns the arccosine of an angle alias for Math.acos

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

adoptCanvas()

Attaches event handlers to the current canvas

alpha(…args) → {number}

returns the alpha value of the color

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments
Returns:
  • the alpha value
Type: 
number

angleMode(mode)

sets the angle mode

Parameters:
NameTypeDescription
modestring

use DEGREES or RADIANS

arc(x, y, w, h, start, stop, closeopt)

draws an arc.

Parameters:
NameTypeAttributesDefaultDescription
xnumber
ynumber
wnumber

width

hnumber

width

startnumber

start angle

stopnumber

stop angle

closeboolean<optional>
false

call endShape(CLOSE)

arcMode(mopt)

sets the positionin' mode for arcs

Parameters:
NameTypeAttributesDefaultDescription
mnumber<optional>
CENTER

mode; please only use CORNER an' CENTER or 0 an' 1

Example
arcMode(CORNER)
//draws arcs from the top-left corner
arcMode(CENTER)
//draws arcs from their center

asin(ang) → {number}

returns the arcsine of an angle alias for Math.asin

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

atan(ang) → {number}

returns the arctangent of an angle alias for Math.atan

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

atan2(y, x) → {number}

alias for Math.atan2

Parameters:
NameTypeDescription
ynumber
xnumber
Returns:
Type: 
number

background(…args)

sets the background for the canvas

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments

beginShape()

starts a new shape

bezier(sx, sy, c1x, c1y, c2x, c2y, ex, ey)

draws a curve given eight points. called in this order: vertex -> bezierVertex

Parameters:
NameTypeDescription
sxnumber

start x

synumber

start y

c1xnumber

control x 1

c1ynumber

control y 1

c2xnumber

contorl x 2

c2ynumber

control y 2

exnumber

end x

eynumber

end y

bezierPoint(a, b, c, d, t) → {number}

evaluates the bezier at a point given t

Parameters:
NameTypeDescription
anumber

control x 1

bnumber

control y 1

cnumber

control x 2

dnumber

control y 2

tnumber

value between 0 an' 1

Returns:
Type: 
number

bezierTangent(a, b, c, d, t) → {number}

evaluates the bezier at a tangent given t

Parameters:
NameTypeDescription
anumber

control x 1

bnumber

control y 1

cnumber

control x 2

dnumber

control y 2

tnumber

value between 0 an' 1

Returns:
Type: 
number

bezierVertex(c1x, c1y, c2x, c2y, x, y)

adds a bezier vertex to a shape a bezier curve, two control points an' one endpoint

Parameters:
NameTypeDescription
c1xnumber

control x 1

c1ynumber

control y 1

c2xnumber

control x 2

c2ynumber

control y 2

xnumber
ynumber

blue(…args) → {number}

returns the blue value of the color

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments
Returns:
  • the blue value
Type: 
number

ceil(n) → {number}

returns the ceilinged number

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

chebyshevDistance(x1, y1, x2, y2) → {number}

returns the chebyshev distance between two coordinates

Parameters:
NameTypeDescription
x1number
y1number
x2number
y2number
Returns:
  • the euclidean distance
Type: 
number

clear()

draws a clear rectangle across the entire canvas

clearLogs()

clears the console

color()

returns the color given a variety of arguments. this is a monster function that handles a lot of cases.

Example
color(25)
color([25])
//returns "rgba(25, 25, 25, 1)"
color(25, 100)
color([25, 100])
//returns "rgba(25, 25, 25, 0.3921...)" where 0.3921... = 100 / 255
color(175, 250, 175)
color([175, 250, 175])
//returns "rgba(175, 250, 175, 1)"
color(175, 250, 175, 100)
color([175, 250, 175, 100])
//returns "rgba(175, 250, 175, 0.3921...)" where 0.3921... = 100 / 255
colorMode(HSL)
color(147, 50, 47)
color([147, 50, 47])
color("hsl(147, 50%, 47%)")
//returns "hsl(147, 50%, 47%)"
colorMode(HEX)
color("#000")
//returns "#000"
color("rgba(25, 25, 25, 1)")
//returns "rgba(25, 25, 25, 1)"

colorMode(mode)

sets the color mode

Parameters:
NameTypeDescription
modestring

use RGBA or HEX or HSL

constrain(val, low, high) → {number}

constrain a value between two values

Parameters:
NameTypeDescription
valnumber

value to be constrained

lownumber

lowest value that the value can be

highnumber

highest value that the value can be

Returns:
  • constrained value
Type: 
number

cos(ang) → {number}

returns the cosine of an angle alias for Math.cos

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

createFont(font) → {string}

do NOT use this function! this is simply for PJS compatibility. it's useless, just returns whatever you input as an argument.

Parameters:
NameTypeDescription
fontstring
Returns:

font

Type: 
string

cursor(name)

alias for document.body.style.cursor

Parameters:
NameTypeDescription
namestring

name of the cursor

curve(sx, sy, cx, cy, ex, ey)

draws a curve given six points. called in this order: vertex -> curveVertex

Parameters:
NameTypeDescription
sxnumber

start x

synumber

start y

cxnumber

control x

cynumber

control y

exnumber

end x

eynumber

end y

curveVertex(cx, cy, x, y)

adds a curve vertex to a shape a quadratic curve, a singular control point an' an endpoint.

Parameters:
NameTypeDescription
cxnumber

control x

cynumber

control y

xnumber
ynumber

day() → {number}

returns the day

Returns:
  • day
Type: 
number

debug(…args)

alias for console.debug

Parameters:
NameTypeAttributesDescription
args*<repeatable>

degrees(ang) → {number}

returns the degrees of an angle in radians

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

dist(x1, y1, x2, y2) → {number}

returns the euclidean distance between two coordinates

Parameters:
NameTypeDescription
x1number
y1number
x2number
y2number
Returns:
  • the euclidean distance
Type: 
number

ellipse(x, y, w, h)

draws an ellipse or circle

Parameters:
NameTypeDescription
xnumber
ynumber
wnumber

width

hnumber

height

ellipseMode(mopt)

sets the positionin' mode for ellipses

Parameters:
NameTypeAttributesDefaultDescription
mnumber<optional>
CENTER

mode; please only use CORNER an' CENTER or 0 an' 1

Example
ellipseMode(CORNER)
//draws ellipses from the top-left corner
ellipseMode(CENTER)
//draws ellipses from their center

enableContextMenu()

enables the context menu, so you can right-click an' save the canvas as an image.

endShape(endopt)

ends the shape calls an' draws a shape. this could be abused to draw the same shape again 'cuz i don't clear the path, semi-intentionally.

Parameters:
NameTypeAttributesDescription
endboolean<optional>

use CLOSE, closes a shape by callin' ctx.closePath

exp(n) → {number}

take the natural number to a number n

Parameters:
NameTypeDescription
nnumber

power to raise the natural number to

Returns:
Type: 
number

fill(…args)

sets the fill color for the shapes following the call

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments

floor(n) → {number}

returns the floored number

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

frameRate()

sets the frame rate

get(…args) → {ImageData|string}

returns the ImageData for the given canvas, coordinates an' dimensions

Parameters:
NameTypeAttributesDescription
argsnumber | HTMLCanvasElement | OffscreenCanvas<repeatable>

[x, y, width, height, sourceCanvas]

Returns:
  • the color or ImageData object
Type: 
ImageData | string
Example
get()
//same as get(0, 0, width, height)
get(0, 0)
//returns the color of the pixel at (0, 0)
get(canvas, 0, 0)
//returns the color of the pixel at (0, 0) on canvas
get(0, 0, 20, 20)
//returns the ImageData object for (0, 0) with dimensions 20px by 20px
get(canvas, 0, 0, 20, 20)
//returns the ImageData object for (0, 0) with dimensions 20px by 20px on canvas

getFont() → {Promise}

returns a promise that resolves once all fonts has been fetched.

Returns:
Type: 
Promise
Example
getFont("Roboto", "Comfortaa")
//fetches Roboto an' Comfortaa from Google Fonts

getImage() → {Promise}

returns a promise that resolves once an image has been fetched.

Returns:
Type: 
Promise

green(…args) → {number}

returns the green value of the color

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments
Returns:
  • the green value
Type: 
number

hour() → {number}

returns the hours

Returns:
  • hours
Type: 
number

image(img, x, y, wopt, hopt)

draws an ImageData object, HTMLCanvasElement, or HTMLImageElement on the canvas

Parameters:
NameTypeAttributesDefaultDescription
imgHTMLCanvasElement | ImageData | HTMLImageElement

image to be drawn

xnumber
ynumber
wnumber<optional>
img.width

the width of the image. defaults to the width of the image. i mean what else would it default too lol?

hnumber<optional>
img.height

the height of the image. defaults to the height of the image. i mean what else would it default too lol?

Example
image(img, 0, 0) 
//draws the image at (0, 0) with the default width an' height
image(img, 0, 0) 
//draws the image at (0, 0) with the dimensions 400px by 400px

imageMode(mopt)

sets the positionin' mode for images

Parameters:
NameTypeAttributesDefaultDescription
mnumber<optional>
CORNER

mode; please only use CORNER an' CENTER or 0 an' 1

Example
imageMode(CORNER)
//draws rectangles from the top-left corner
imageMode(CENTER)
//draws rectangles from their center

isEqual(…args)

alias for console.assert

Parameters:
NameTypeAttributesDescription
args*<repeatable>

lerp(val, targ, amt) → {number}

linearly interpolates a value

Parameters:
NameTypeDescription
valnumber

value to interpolate

targnumber

value to interpolate to

amtnumber

amount to interpolate by

Returns:
  • interpolated value
Type: 
number

lerpColor(color1, color2, amt) → {string}

uses lerp to linerally interpolate two rgba color values

Parameters:
NameTypeDescription
color1string

use color

color2string

use color

amtnumber

amount to lerp

Returns:
  • the lerped color
Type: 
string

line(x1, y1, x2, y2)

draws a line

Parameters:
NameTypeDescription
x1number
y1number
x2number
y2number

loadFont() → {HTMLLinkElement}

returns an HTMLLinkElement that loads the fonts from Google Fonts

Returns:
Type: 
HTMLLinkElement
Example
loadFont("Roboto", "Comfortaa")
//fetches Roboto an' Comfortaa from Google Fonts

loadImage() → {Image}

returns an image

Returns:
Type: 
Image

log(n) → {number}

returns the logarithm of a number alias for Math.log

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

loop()

enables the draw function

mag(a, b) → {number}

returns the magnitude of two values

Parameters:
NameTypeDescription
anumber
bnumber
Returns:
  • the magnitude
Type: 
number

manhattanDistance(x1, y1, x2, y2) → {number}

returns the manhattan distance between two coordinates

Parameters:
NameTypeDescription
x1number
y1number
x2number
y2number
Returns:
  • the euclidean distance
Type: 
number

map(val, a, b, c, d) → {number}

map a value to two ranges

Parameters:
NameTypeDescription
valnumber

value to normalize

anumber

lowest value of range 1

bnumber

highest value of range 1

cnumber

lowest value of range 2

dnumber

highest value of range 2

Returns:
  • the mapped value
Type: 
number

mask()

masks the previous graphics over the followin' graphics

Example
set(width, height)
clear()
//masking shape
mask()
//shapes to be masked
const img = get(0, 0, width, height)
set(document.getElementsByTagName("canvas")[0])
image(img, 0, 0)

max(a, b) → {number}

returns the maximum value from two values does not find the maximum of all values for efficiency's sake if such a function is necessary, this will do in a pinch: const maxAll = (...args) => args.reduce((a, b) => max(a, b), 0)

Parameters:
NameTypeDescription
anumber
bnumber
Returns:
  • the maximum
Type: 
number

millis() → {number}

returns the milliseconds that have elapsed since the program started.

Returns:
Type: 
number

min(a, b) → {number}

returns the minimum value from two values does not find the minimum of all values for efficiency's sake if such a function is necessary, this will do in a pinch: const minAll = (...args) => args.reduce((a, b) => min(a, b), 0)

Parameters:
NameTypeDescription
anumber
bnumber
Returns:
  • the minimum
Type: 
number

minute() → {number}

returns the minutes

Returns:
  • minutes
Type: 
number

month() → {number}

returns the month

Returns:
  • month
Type: 
number

noFill()

removes any stroke from the shapes to be drawn after the function call

noLoop()

disables the draw function

noSmooth()

disables image smoothing

noStroke()

removes any stroke from the shapes to be drawn after the function call

norm(val, low, high) → {number}

normalizes a value

Parameters:
NameTypeDescription
valnumber

value to normalize

lownumber

lowest value

highnumber

highest value

Returns:
  • the normalized value
Type: 
number

point(x, y)

draws a point with stroke

Parameters:
NameTypeDescription
xnumber
ynumber

popMatrix()

restores the saved transformation matrix state

popStyle()

restores the saved state of the canvas

pow(a, b) → {number}

returns the result of a base an' a power alias for a ** b

Parameters:
NameTypeDescription
anumber

base

bnumber

power

Returns:
Type: 
number

println(…args)

prints out any values to a homemade console each argument is printed out on a new line

Parameters:
NameTypeAttributesDescription
args*<repeatable>

pushMatrix()

save the current transformation matrix state

pushStyle()

saves the current state of the canvas

quad(x1, y1, x2, y2, x3, y3, x4, y4)

draws a quadrilateral usin' vertex

Parameters:
NameTypeDescription
x1number
y1number
x2number
y2number
x3number
y3number
x4number
y4number

radians(ang) → {number}

returns the radian value of an angle in degrees

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

random(minopt, maxopt) → {number}

returns a random value usin' Math.random

Parameters:
NameTypeAttributesDescription
minnumber<optional>

if max, minimum value generated; else, maximum value generated with the minimum value being 0

maxnumber<optional>

maximum value generated

Returns:
  • random value
Type: 
number

rect(x, y, width, height, …radius)

draws a rectangle on the canvas

Parameters:
NameTypeAttributesDescription
xnumber
ynumber
widthnumber
heightnumber
radiusnumber<repeatable>

radius or radii. basically works the same as ctx.roundRect

Example
rect(0, 0, 10, 10) 
//draws a rectangle at (0, 0) with dimensions 10px by 10px

rectMode(mopt)

sets the positionin' mode for rectangles

Parameters:
NameTypeAttributesDefaultDescription
mnumber<optional>
CORNER

mode; please only use CORNER an' CENTER or 0 an' 1

Example
rectMode(CORNER)
//draws rectangles from the top-left corner
rectMode(CENTER)
//draws rectangles from their center

red(…args) → {number}

returns the red value of the color

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments
Returns:
  • the red value
Type: 
number

rejectCanvas()

Removes all event listeners from a canvas, in anticipation of a new host.

rotate(ang)

rotate given an angle

Parameters:
NameTypeDescription
angnumber

rotation angle

round(n) → {number}

returns the rounded number

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

scale(w, hopt)

scale given a factor

Parameters:
NameTypeAttributesDescription
wnumber

if only one arg, the scale factor; else the x scale factor.

hnumber<optional>

y scale factor

seconds() → {number}

returns the seconds

Returns:
  • seconds
Type: 
number

set(…argsopt)

sets the current canvas to a different canvas, whether off or on screen

xxx HS16 - Now attaches the proper event listeners to the canvas.

Parameters:
NameTypeAttributesDescription
argsHTMLCanvasElement | OffscreenCanvas | number<optional>
<repeatable>

argument for the set function

Example
set() 
//sets the canvas to a new OffscreenCanvas with the same width an' height of the current canvas
set(document.getElementsByTagName("canvas")[0]) 
//set the canvas to the first canvas element in the DOM
set(400, 400) 
//sets the canvas to a new OffscreenCanvas with dimensions 400px by 400px

sin(ang) → {number}

returns the sine of an angle alias for Math.sin

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

size(w, h, cssopt)

sets the canvas width an' height.

Parameters:
NameTypeAttributesDefaultDescription
wnumber

width

hnumber

height

cssboolean<optional>
false

whether to set the dimensions of the canvas or just the resolution

Example
size(600, 600)
//resizes the resolution of the canvas to 600px by 600px
size(600, 600, true)
//resizes the resolution an' dimension of the canvas to 600px by 600px

smooth()

enables image smoothing

sq(n) → {number}

returns the square of a number alias for n ** 2

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

sqrt(n) → {number}

returns the square root of a number alias for Math.sqrt

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

stroke(…args)

sets the fill color for the shapes following the call

Parameters:
NameTypeAttributesDescription
argsstring | number | Array<repeatable>
See
  • color for the definition of the arguments

strokeCap(mode)

sets the stroke cap. see ctx.lineCap

Parameters:
NameTypeDescription
modestring

line cap value; use ski.js constants

strokeJoin(mode)

sets the stroke cap. see ctx.lineJoin

Parameters:
NameTypeDescription
modestring

line join value; use ski.js constants

strokeWeight(weight)

sets the stroke cap. see ctx.lineWidth

Parameters:
NameTypeDescription
weightstring

line width value; use ski.js constants

tan(ang) → {number}

returns the tangent of an angle alias for Math.tan

Parameters:
NameTypeDescription
angnumber

angle

Returns:
Type: 
number

text(msgnon-null, x, y, wopt, hopt)

displays text on the canvas

Parameters:
NameTypeAttributesDescription
msg*

the message you want to display can be anythin' but null.

xnumber
ynumber
wnumber<optional>

width

hnumber<optional>

height - (this doesn't do anythin')

Example
textAlign(CENTER, CENTER)
text("hello there!", width / 2, height / 2) 
//draws "hello there!" on the center of the canvas
text("hello there!", width / 2, height / 2, 200, 100) 
//draws "hello there!" on the center of the canvas with a maximum width of 200px

textAlign(horiztonalopt, verticalopt)

aligns the text drawn on the canvas

Parameters:
NameTypeAttributesDefaultDescription
horiztonalnumber<optional>
CORNER

horizontal alignment

verticalnumber<optional>
CORNER

vertical alignment

Example
textAlign(CENTER, CENTER)
//text will now be drawn from the center

textAscent()

i honestly don't know. just ported the concept from PJS.

textDescent()

i honestly don't know. just ported the concept from PJS.

textFont(font, sizeopt)

sets the font for any text drawn

Parameters:
NameTypeAttributesDescription
fontstring

the name of the font

sizenumber<optional>

the size of the font in px

Example
textFont("Arial", 12) 
//font is arial with size 12px

textLeading(val)

sets the space between text on the y-axis

Parameters:
NameTypeDescription
valnumber

leading in pix

textSize(size)

sets the font size for any text drawn

Parameters:
NameTypeDescription
sizenumber
Example
textSize(20) 
//text will be drawn at 20px

textWidth(txt)

find the width of a string given the current font an' font size for strings with line breaks, it finds the largest width

Parameters:
NameTypeDescription
txtstring

text

translate(x, y)

translate given coordinates

Parameters:
NameTypeDescription
xnumber
ynumber

triangle(x1, y1, x2, y2, x3, y3)

draws a triangle

Parameters:
NameTypeDescription
x1number
y1number
x2number
y2number
x3number
y3number

trunc(n) → {number}

returns the truncated number

Parameters:
NameTypeDescription
nnumber
Returns:
Type: 
number

vertex(x, y)

adds a vertex to a shape

Parameters:
NameTypeDescription
xnumber
ynumber

wrapText(str, width) → {string}

i see absolutely no reason why you would document this, .-. it's a helper function for the text function.

Parameters:
NameTypeDescription
strstring

a string

widthnumber

the width of the text

Returns:
  • the string with proper line breaks.
Type: 
string

year() → {number}

returns the year

Returns:
  • year
Type: 
number