Methods
abs(n) → {number}
returns the absolute value of a number
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
acos(ang) → {number}
returns the arccosine of an angle alias for Math.acos
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
adoptCanvas()
Attaches event handlers to the current canvas
alpha(…args) → {number}
returns the alpha value of the color
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <repeatable> |
- See
- color for the definition of the arguments
- the alpha value
- Type:
- number
angleMode(mode)
sets the angle mode
Name | Type | Description |
---|---|---|
mode | string | use DEGREES or RADIANS |
arc(x, y, w, h, start, stop, closeopt)
draws an arc.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
x | number | |||
y | number | |||
w | number | width | ||
h | number | width | ||
start | number | start angle | ||
stop | number | stop angle | ||
close | boolean | <optional> | false | call endShape(CLOSE) |
arcMode(mopt)
sets the positionin' mode for arcs
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
m | number | <optional> | CENTER | mode; please only use CORNER an' CENTER or 0 an' 1 |
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
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
atan(ang) → {number}
returns the arctangent of an angle alias for Math.atan
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
atan2(y, x) → {number}
alias for Math.atan2
Name | Type | Description |
---|---|---|
y | number | |
x | number |
- Type:
- number
background(…args)
sets the background for the canvas
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <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
Name | Type | Description |
---|---|---|
sx | number | start x |
sy | number | start y |
c1x | number | control x 1 |
c1y | number | control y 1 |
c2x | number | contorl x 2 |
c2y | number | control y 2 |
ex | number | end x |
ey | number | end y |
bezierPoint(a, b, c, d, t) → {number}
evaluates the bezier at a point given t
Name | Type | Description |
---|---|---|
a | number | control x 1 |
b | number | control y 1 |
c | number | control x 2 |
d | number | control y 2 |
t | number | value between 0 an' 1 |
- Type:
- number
bezierTangent(a, b, c, d, t) → {number}
evaluates the bezier at a tangent given t
Name | Type | Description |
---|---|---|
a | number | control x 1 |
b | number | control y 1 |
c | number | control x 2 |
d | number | control y 2 |
t | number | value between 0 an' 1 |
- 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
Name | Type | Description |
---|---|---|
c1x | number | control x 1 |
c1y | number | control y 1 |
c2x | number | control x 2 |
c2y | number | control y 2 |
x | number | |
y | number |
blue(…args) → {number}
returns the blue value of the color
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <repeatable> |
- See
- color for the definition of the arguments
- the blue value
- Type:
- number
ceil(n) → {number}
returns the ceilinged number
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
chebyshevDistance(x1, y1, x2, y2) → {number}
returns the chebyshev distance between two coordinates
Name | Type | Description |
---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number |
- the euclidean distance
- Type:
- number
clear()
draws a clear rectangle across the entire canvas
clearLogs()
clears the console
- Source
color()
returns the color given a variety of arguments. this is a monster function that handles a lot of cases.
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
Name | Type | Description |
---|---|---|
mode | string | use RGBA or HEX or HSL |
constrain(val, low, high) → {number}
constrain a value between two values
Name | Type | Description |
---|---|---|
val | number | value to be constrained |
low | number | lowest value that the value can be |
high | number | highest value that the value can be |
- constrained value
- Type:
- number
cos(ang) → {number}
returns the cosine of an angle alias for Math.cos
Name | Type | Description |
---|---|---|
ang | number | angle |
- 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.
Name | Type | Description |
---|---|---|
font | string |
font
- Type:
- string
cursor(name)
alias for document.body.style.cursor
Name | Type | Description |
---|---|---|
name | string | name of the cursor |
curve(sx, sy, cx, cy, ex, ey)
draws a curve given six points. called in this order: vertex -> curveVertex
Name | Type | Description |
---|---|---|
sx | number | start x |
sy | number | start y |
cx | number | control x |
cy | number | control y |
ex | number | end x |
ey | number | end y |
curveVertex(cx, cy, x, y)
adds a curve vertex to a shape a quadratic curve, a singular control point an' an endpoint.
Name | Type | Description |
---|---|---|
cx | number | control x |
cy | number | control y |
x | number | |
y | number |
day() → {number}
returns the day
- day
- Type:
- number
debug(…args)
alias for console.debug
Name | Type | Attributes | Description |
---|---|---|---|
args | * | <repeatable> |
degrees(ang) → {number}
returns the degrees of an angle in radians
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
dist(x1, y1, x2, y2) → {number}
returns the euclidean distance between two coordinates
Name | Type | Description |
---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number |
- the euclidean distance
- Type:
- number
ellipse(x, y, w, h)
draws an ellipse or circle
Name | Type | Description |
---|---|---|
x | number | |
y | number | |
w | number | width |
h | number | height |
ellipseMode(mopt)
sets the positionin' mode for ellipses
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
m | number | <optional> | CENTER | mode; please only use CORNER an' CENTER or 0 an' 1 |
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.
Name | Type | Attributes | Description |
---|---|---|---|
end | boolean | <optional> | use CLOSE, closes a shape by callin' ctx.closePath |
exp(n) → {number}
take the natural number to a number n
Name | Type | Description |
---|---|---|
n | number | power to raise the natural number to |
- Type:
- number
fill(…args)
sets the fill color for the shapes following the call
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <repeatable> |
- See
- color for the definition of the arguments
floor(n) → {number}
returns the floored number
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
frameRate()
sets the frame rate
get(…args) → {ImageData|string}
returns the ImageData for the given canvas, coordinates an' dimensions
Name | Type | Attributes | Description |
---|---|---|---|
args | number | | <repeatable> | [x, y, width, height, sourceCanvas] |
- the color or ImageData object
- Type:
- ImageData |
string
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.
- Type:
- Promise
getFont("Roboto", "Comfortaa")
//fetches Roboto an' Comfortaa from Google Fonts
getImage() → {Promise}
returns a promise that resolves once an image has been fetched.
- Type:
- Promise
green(…args) → {number}
returns the green value of the color
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <repeatable> |
- See
- color for the definition of the arguments
- the green value
- Type:
- number
hour() → {number}
returns the hours
- hours
- Type:
- number
image(img, x, y, wopt, hopt)
draws an ImageData object, HTMLCanvasElement, or HTMLImageElement on the canvas
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
img | HTMLCanvasElement | | image to be drawn | ||
x | number | |||
y | number | |||
w | number | <optional> | img.width | the width of the image. defaults to the width of the image. i mean what else would it default too lol? |
h | number | <optional> | img.height | the height of the image. defaults to the height of the image. i mean what else would it default too lol? |
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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
m | number | <optional> | CORNER | mode; please only use CORNER an' CENTER or 0 an' 1 |
imageMode(CORNER)
//draws rectangles from the top-left corner
imageMode(CENTER)
//draws rectangles from their center
isEqual(…args)
alias for console.assert
Name | Type | Attributes | Description |
---|---|---|---|
args | * | <repeatable> |
lerp(val, targ, amt) → {number}
linearly interpolates a value
Name | Type | Description |
---|---|---|
val | number | value to interpolate |
targ | number | value to interpolate to |
amt | number | amount to interpolate by |
- interpolated value
- Type:
- number
lerpColor(color1, color2, amt) → {string}
uses lerp
to linerally interpolate two rgba color values
Name | Type | Description |
---|---|---|
color1 | string | use |
color2 | string | use |
amt | number | amount to lerp |
- the lerped color
- Type:
- string
line(x1, y1, x2, y2)
draws a line
Name | Type | Description |
---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number |
loadFont() → {HTMLLinkElement}
returns an HTMLLinkElement that loads the fonts from Google Fonts
- Type:
- HTMLLinkElement
loadFont("Roboto", "Comfortaa")
//fetches Roboto an' Comfortaa from Google Fonts
loadImage() → {Image}
returns an image
- Type:
- Image
log(n) → {number}
returns the logarithm of a number alias for Math.log
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
loop()
enables the draw function
mag(a, b) → {number}
returns the magnitude of two values
Name | Type | Description |
---|---|---|
a | number | |
b | number |
- the magnitude
- Type:
- number
manhattanDistance(x1, y1, x2, y2) → {number}
returns the manhattan distance between two coordinates
Name | Type | Description |
---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number |
- the euclidean distance
- Type:
- number
map(val, a, b, c, d) → {number}
map a value to two ranges
Name | Type | Description |
---|---|---|
val | number | value to normalize |
a | number | lowest value of range 1 |
b | number | highest value of range 1 |
c | number | lowest value of range 2 |
d | number | highest value of range 2 |
- the mapped value
- Type:
- number
mask()
masks the previous graphics over the followin' graphics
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)
Name | Type | Description |
---|---|---|
a | number | |
b | number |
- the maximum
- Type:
- number
millis() → {number}
returns the milliseconds that have elapsed since the program started.
- 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)
Name | Type | Description |
---|---|---|
a | number | |
b | number |
- the minimum
- Type:
- number
minute() → {number}
returns the minutes
- minutes
- Type:
- number
month() → {number}
returns the month
- 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
Name | Type | Description |
---|---|---|
val | number | value to normalize |
low | number | lowest value |
high | number | highest value |
- the normalized value
- Type:
- number
point(x, y)
draws a point with stroke
Name | Type | Description |
---|---|---|
x | number | |
y | number |
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
Name | Type | Description |
---|---|---|
a | number | base |
b | number | power |
- Type:
- number
println(…args)
prints out any values to a homemade console each argument is printed out on a new line
Name | Type | Attributes | Description |
---|---|---|---|
args | * | <repeatable> |
- Source
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
Name | Type | Description |
---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number | |
x3 | number | |
y3 | number | |
x4 | number | |
y4 | number |
radians(ang) → {number}
returns the radian value of an angle in degrees
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
random(minopt, maxopt) → {number}
returns a random value usin' Math.random
Name | Type | Attributes | Description |
---|---|---|---|
min | number | <optional> | if max, minimum value generated; else, maximum value generated with the minimum value being 0 |
max | number | <optional> | maximum value generated |
- random value
- Type:
- number
rect(x, y, width, height, …radius)
draws a rectangle on the canvas
Name | Type | Attributes | Description |
---|---|---|---|
x | number | ||
y | number | ||
width | number | ||
height | number | ||
radius | number | <repeatable> | radius or radii. basically works the same as |
rect(0, 0, 10, 10)
//draws a rectangle at (0, 0) with dimensions 10px by 10px
rectMode(mopt)
sets the positionin' mode for rectangles
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
m | number | <optional> | CORNER | mode; please only use CORNER an' CENTER or 0 an' 1 |
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
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <repeatable> |
- See
- color for the definition of the arguments
- 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
Name | Type | Description |
---|---|---|
ang | number | rotation angle |
round(n) → {number}
returns the rounded number
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
scale(w, hopt)
scale given a factor
Name | Type | Attributes | Description |
---|---|---|---|
w | number | if only one arg, the scale factor; else the x scale factor. | |
h | number | <optional> | y scale factor |
seconds() → {number}
returns the seconds
- 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.
Name | Type | Attributes | Description |
---|---|---|---|
args | HTMLCanvasElement | | <optional> <repeatable> | argument for the set function |
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
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
size(w, h, cssopt)
sets the canvas width an' height.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
w | number | width | ||
h | number | height | ||
css | boolean | <optional> | false | whether to set the dimensions of the canvas or just the resolution |
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
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
sqrt(n) → {number}
returns the square root of a number alias for Math.sqrt
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
stroke(…args)
sets the fill color for the shapes following the call
Name | Type | Attributes | Description |
---|---|---|---|
args | string | | <repeatable> |
- See
- color for the definition of the arguments
strokeCap(mode)
sets the stroke cap. see ctx.lineCap
Name | Type | Description |
---|---|---|
mode | string | line cap value; use ski.js constants |
strokeJoin(mode)
sets the stroke cap. see ctx.lineJoin
Name | Type | Description |
---|---|---|
mode | string | line join value; use ski.js constants |
strokeWeight(weight)
sets the stroke cap. see ctx.lineWidth
Name | Type | Description |
---|---|---|
weight | string | line width value; use ski.js constants |
tan(ang) → {number}
returns the tangent of an angle alias for Math.tan
Name | Type | Description |
---|---|---|
ang | number | angle |
- Type:
- number
text(msgnon-null, x, y, wopt, hopt)
displays text on the canvas
Name | Type | Attributes | Description |
---|---|---|---|
msg | * | the message you want to display can be anythin' but null. | |
x | number | ||
y | number | ||
w | number | <optional> | width |
h | number | <optional> | height - (this doesn't do anythin') |
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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
horiztonal | number | <optional> | CORNER | horizontal alignment |
vertical | number | <optional> | CORNER | vertical alignment |
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
Name | Type | Attributes | Description |
---|---|---|---|
font | string | the name of the font | |
size | number | <optional> | the size of the font in px |
textFont("Arial", 12)
//font is arial with size 12px
textLeading(val)
sets the space between text on the y-axis
Name | Type | Description |
---|---|---|
val | number | leading in pix |
textSize(size)
sets the font size for any text drawn
Name | Type | Description |
---|---|---|
size | number |
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
Name | Type | Description |
---|---|---|
txt | string | text |
translate(x, y)
translate given coordinates
Name | Type | Description |
---|---|---|
x | number | |
y | number |
triangle(x1, y1, x2, y2, x3, y3)
draws a triangle
Name | Type | Description |
---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number | |
x3 | number | |
y3 | number |
trunc(n) → {number}
returns the truncated number
Name | Type | Description |
---|---|---|
n | number |
- Type:
- number
vertex(x, y)
adds a vertex to a shape
Name | Type | Description |
---|---|---|
x | number | |
y | number |
wrapText(str, width) → {string}
i see absolutely no reason why you would document this, .-. it's a helper function for the text function.
Name | Type | Description |
---|---|---|
str | string | a string |
width | number | the width of the text |
- the string with proper line breaks.
- Type:
- string
year() → {number}
returns the year
- year
- Type:
- number