API documentation

General

Everything done in the render function is done to a clean, transparent "buffer" canvas. Nothing is written to the screen until the commit() function is called. When that happens, the contents of the temporary buffer canvas is added to the screen canvas and the buffer is cleared. It is then possible to draw new stuff and commit that as well.

So, while everything is first drawn unto a clean canvas, in the end it's composited with the previous frame. If you want to clear the screen, you need to explicitly draw e.g. a black rectangle covering everything.

Unless otherwise noted, all (x,y) coordinates are assumed to be in the space of (0,0) to (1,1) where (0,0) is the top left corner and (1,1) is the bottom right corner.

A whole bunch of functions are imported into the scope of the render function and made available. Here's a brief rundown.

Misc.

commit(keepBuffer)

This one has already been mentioned above. It clears the buffer canvas and draws the contents onto the screen. If keepBuffer is true, the buffer is not cleared.

decay(amount)

Draws a black rectangle covering everything, amount is a number in the range 0-1 indicating the opacity of the rectangle.

quality(q, keepImage)

Sets the quality (internal resolution) of the canvas, q is a number in the range 0-1 (non-zero) where 0 is lowest quality and 1 is 1:1 resolution. Unless keepImage is true, both buffer and screen will be cleared when setting the quality.

clearRect(x, y, w, h)

Clears a rectangular region of the buffer canvas.

Drawing functions

Following is a number of drawing functions which all can be used to draw simple shapes. They all have two versions, one for drawing a single shape (rect, circle, etc) and one that allows you to feed it an array of shapes to draw. The shapes are then all drawn with the same style. The style parameters all work the same way for all the functions, if fillStyle is present the shape will be filled with the given color, if strokeStyle (and optionally strokeWidth) is present, the shape's border will be drawn.

drawRect(x, y, w, h, fillStyle, strokeStyle, strokeWidth)

Parameters should be self-explanatory.

drawRects(rects, fillStyle, strokeStyle, strokeWidth)

The rects array contains objects of the form {x: x, y: y, w: w, h: h}.

drawCircle(x, y, radius, fillStyle, strokeStyle, strokeWidth)

Again, parameters should be self-explanatory.

drawCircles(circles, fillStyle, strokeStyle, strokeWidth)

The circles array contains objects of the form {x: x, y: y, radius: radius}.

drawArc(x, y, radius, startAngle, endAngle, fillStyle, strokeStyle, strokeWidth)

Draws an arc. startAngle and endAngle are in radians.

drawArcs(arcs, fillStyle, strokeStyle, strokeWidth)

The arcs array contains objects of the form {x: x, y: y, radius: radius, startAngle: startAngle, endAngle: endAngle}.

drawPath(points, close, fillStyle, strokeStyle, strokeWidth)

Draws a path of arbitrary points. The argument points is an array of 2-element arrays where each 2-element array is a point on the path [x, y]. E.g. [[0.1,0.1], [0.5,0.1], [0.5,0.5]].

drawPaths(paths, close, fillStyle, strokeStyle, strokeWidth)

The paths array contains points arrays as described above.

Images

drawImage(src, x, y, w, h, angle)

Draws the image specified by the src parameter at position x,y with the dimensions w x h. Optionally rotated by angle (in radians).

Frame transformation and deformation

zoom(factor)

Zooms the image by the (non-negative) value factor. A value of 1 indicates no zoom, 2 zooms to twice the size, etc.

stretch(sx, sy [, cx, cy])

Stretches the image by a factor of sx along the horizontal axis and sy along the vertical axis. By default the center of the screen (0.5, 0.5) is the origin of the stretching, unless an alternative point is given in the cx, cy parameters.

move(mx, my)

Translates the image.

rotate(angle)

Rotates the image. Angle is given in radians.

rotozoom(angle, zoom)

Simply a combination of rotation and zoom.

deform(fn, gridX, gridY)

This function takes another function, fn, as its first parameter. The function fn is applied to all points of a grid of gridX * gridY points and this altered grid is then used to deform the current buffer image. It must follow the signature:

function fn(radius, angle, x, y) { return { ... } }

The radius parameter is the distance of the point from the center of the screen. The angle parameter is the angle (in radians) of the point relative to the horizontal line going through the center of the screen. The x and y are the coordinates of the point, with x=0, y=0 being the top left corner and x=1, y=1 being the bottom right corner.

The function must return an object with zero or more of the following properties:

• zoom : A non-negative value indicating how much the point should be zoomed in/out from the center. A value of 1 indicates no change.
• rotate : A value in radians indicating how much the point should be rotated around the center of the screen.
• stretchX : A value indicating how much the point should be stretched out from the center along the horizontal axis.
• stretchY : A value indicating how much the point should be stretched out from the center along the vertical axis.
• centerX : A value indicating a horizontal shifting of the center point used for stretching. From -1 to 1 with -1 shifting the center to the left edge of the screen and 1 shifting the center to right edge.
• centerY : A value indicating a vertical shifting of the center point used for stretching. From -1 to 1 with -1 shifting the center to the top edge of the screen and 1 shifting the center to bottom edge.
• moveX : A value indicating a horizontal translation of the point.
• moveY : A value indicating a vertical translation of the point.

Color conversion

rgb2hsl(r, g, b)

Converts an RGB color to HSL. Returns an object of the form {h:h, s:s, l:l}.

hsl2rgb(hue, sat, light)

Converts an HSL color to RGB. Returns an object of the form {r:r, g:g, b:b}.

hsv2rgb(hue, sat, variance)

Converts an HSV color to RGB. Returns an object of the form {r:r, g:g, b:b}.

Math functions