API Reference

Quick reference for all Klint functions. Click any function name for detailed docs with examples.

Canvas Properties

Property	Type	Description
K.width	number	Canvas width in device pixels
K.height	number	Canvas height in device pixels
K.time	number	Elapsed time in seconds
K.deltaTime	number	Time since last frame in milliseconds
K.frame	number	Frame count since start
K.dpr	number	Device pixel ratio

Drawing Functions

Function	Signature
circle	(x, y, radius, radius2?) => void
rectangle	(x, y, width, height?) => void
roundedRectangle	(x, y, width, radius, height?) => void
line	(x1, y1, x2, y2) => void
point	(x, y) => void
polygon	(x, y, radius, sides, radius2?, rotation?) => void
disk	(x, y, radius, startAngle?, endAngle?, closed?) => void
ellipse	(x, y, radiusX, radiusY) => void

Styling Functions

Function	Signature
fillColor	(color: string | CanvasGradient) => void
strokeColor	(color: string | CanvasGradient) => void
strokeWidth	(width: number) => void
strokeCap	(cap: CanvasLineCap) => void
strokeJoin	(join: CanvasLineJoin) => void
noFill	() => void
noStroke	() => void
opacity	(value: number) => void
blend	(mode: GlobalCompositeOperation | "default") => void

Transform Functions

Function	Signature
push	() => void
pop	() => void
translate	(x, y) => void
rotate	(angle) => void
scale	(x, y) => void — requires 2 args
resetTransform	() => void
screenToWorld	(x, y) => { x, y } — call after transforms
worldToScreen	(x, y) => { x, y } — call after transforms
getVisibleBounds	() => { left, top, right, bottom, width, height }

Path Functions

Function	Signature
beginShape	() => void
endShape	(close?) => void
vertex	(x, y) => void
bezierVertex	(cp1x, cp1y, cp2x, cp2y, x, y) => void
quadraticVertex	(cpx, cpy, x, y) => void
arcVertex	(x1, y1, x2, y2, radius) => void
beginContour	() => void
endContour	(forceRevert?) => void
clipTo	(callback, fillRule?) => void

Text Functions

Function	Signature
text	(text, x, y, maxWidth?) => void
paragraph	(text, x, y, width, options?) => void
textFont	(font: string) => void
textSize	(size: number) => void
textStyle	(style: string) => void
textWeight	(weight: string) => void
alignText	(horizontal: CanvasTextAlign, vertical?: CanvasTextBaseline) => void
textLeading	(spacing: number) => number
textWidth	(text: string) => number

Important: Text alignment is alignText (NOT textAlign).

Gradient Functions

Function	Signature
gradient	(x1?, y1?, x2?, y2?) => CanvasGradient
radialGradient	(x1?, y1?, r1?, x2?, y2?, r2?) => CanvasGradient
conicGradient	(angle?, x1?, y1?) => CanvasGradient
addColorStop	(gradient, offset, color) => void

Image Functions

Function	Signature
image	(img, x, y, ...args) => void
createOffscreen	(width, height) => KlintOffscreenContext
loadPixels	() => ImageData
updatePixels	(pixels) => void
readPixels	(x, y, w?, h?) => number[]
scaleTo	(origW, origH, destW, destH, cover?) => number

Canvas Control

Function	Signature
background	(color?: string) => void
clear	() => void
reset	() => void
setCanvasOrigin	("center" | "corner") => void
setImageOrigin	("center" | "corner") => void
setRectOrigin	("center" | "corner") => void
smooth / noSmooth	() => void
toBase64	(type?: string, quality?: number) => string

Math Utilities

Function	Signature
lerp	(A, B, mix, bounded?) => number
remap	(n, A, B, C, D, bounded?) => number
constrain	(val, floor, ceil) => number
distance	(x1, y1, x2, y2, mode?) => number
squareDistance	(x1, y1, x2, y2) => number
dot	(x1, y1, x2, y2) => number
fract	(n, mod, mode?) => number

Elements

Elements are accessed as K.ElementName inside draw functions.

Element	Description	Docs
K.Color	Color creation and manipulation across color spaces	Color
K.Easing	Animation easing functions (in, out, bounce, spring, etc.)	Easing
K.Vector	3D vector math (K.createVector(x, y) or new K.Vector(x, y))	Vector
K.Noise	Seedable noise: Perlin, Simplex, Hash (1-4D), Gaussian random	Noise
K.Text	Advanced text layout (splitTo, circularText, findTextSize)	Text
K.Quadtree	Spatial partitioning for efficient queries	Quadtree
K.Hotspot	Hit testing (circle, rect, ellipse, polygon, path)	Hotspot
K.Grid	Grid generators (rect, radial, hex, triangle)	Grid
K.Strip	Triangle/quad strip, hull, and ribbon rendering	Strip
K.Pixels	Pixel-level read/write (load, update, read)	Pixels
K.Timeline	Keyframe-based animation with tracks and stagger	Timeline

Common Pitfalls

• Option names: dpr not pixelRatio, origin not canvasOrigin
• Text alignment: K.alignText() not K.textAlign()
• Scale needs 2 args: K.scale(2, 2) not K.scale(2) (native canvas API)
• Canvas fills container: Set container size, not canvas size — there are no width/height props
• Device pixels: K.width/K.height are device pixels = CSS pixels × DPR
• Boolean options are strings: alpha: "true" not alpha: true
• K.time is in seconds: Not milliseconds — Math.sin(K.time) oscillates with a ~6.28s period
• K.deltaTime is in milliseconds: Convert with K.deltaTime / 1000 for seconds
• Color functions live on K.Color: Use K.Color.hsl(), not K.hsl()
• Noise lives on K.Noise: Use K.Noise.perlin(), not K.noise()

Next Steps

• Quick Start — Get started
• Klint Component — Component props reference
• Klint Hooks — Hook reference