Not logged in

flextime.js provides the ability to create Flextime instances (via the jQuery method .flexify), provides all the standard methods of flextime instances (including event handling), and sets up basic Color and Gradient handling.

Flextime instances

Flextime instances are never constructed directly: you can only access them via the constructor function passed to the flexify.


Transforms the set of matched elements into Flextime instances, and then calls the constructor function on each one. The constructor will be passed a Flextime instance.

Flextime instance methods

Almost all instance methods are chainable; only those that return usable values are not.

Instance state methods


Sets the size of instance. Calling this method will also completely reinitialize most aspects of the instance. .size takes an optional third argument which specifies the type of rendering context to construct, but at the moment the only valid option is "2d".


Sets the background color for the instance. Note that this is different from clearing the instance to a color. The background color is whatever is visible through pixels whose alpha is not 1.0. Thus, changing the background color does not affect the current contents of the instance at all.


Sets the current fill color of the instance. Set the fill color to false to disabling filling.


Sets the current stroke color of the instance.


Sets the current stroke width of the instance. Set to 0 or a negative value to disable stroking.


Enable or disable smoothing (antialiasing) according to the boolean value of flag.


Sets the global alpha of the instance. The alpha of every drawing primitive will be multiplied by this value.


Sets the global compositing mode. mode can be one of "source-atop", "source-in", "source-out", "source-over", "destination-atop", "destination-in", "destination-out", "destination-over", "lighter", "copy" or "xor". The default is "source-over". (See the Canvas element specification for the full reference on composite operations.)


Resets the state of the rendering context to defaults.

Transformation methods

As with Canvas, all drawing operations in Flextime are fed through a transformation matrix before being drawn to the screen. These methods allow you to modify that matrix, either indirectly, by specifying scaling and rotation factors, or directly, by giving the values in the matrix's cells.


Resets the transformation to the default identity matrix.

Drawing methods


Clears the instance to the color specified (or transparent black, if no color is specified).


Draws a line, with the current stroke color and width, from (x1,y1) to (x2,y2).


Draws a rectangle with its upper-left corner at (x1,y1) and its lower-right at (x2,y2). The rectangle will be filled/stroked according to the current fill and stroke settings.


Draws an ellipse centered at (x1,y1) with a horizontal radius of r1 and a vertical radius of r2. The ellipse will be filled/stroked according to the current fill and stroke settings.


Draws a circle, centered at (x,y) with radius r. The circle will be filled/stroked according to the current fill and stroke settings.


Draws a point (a circle whose radius is the current stroke weight) at (x,y).


Sets the single pixel at (x,y) to the color c. Note that this function may be very slow on some browsers/platforms (i.e., when the canvas surface is stored in video memory).


Returns the color of the single pixel at (x,y). This function may be very slow on some browsers/platforms.

Event handling


Adds the function handler to the end of the list of handlers for the event event. event can be one of "draw", "click", "mousedown", "mouseup", "mousemove", "keypress", "keydown", or "keyup". (event can actually also be the name of a user-defined event type, but currently there is no functionality for triggering user-defined events.)
handler may be a single function or an array of functions. In the latter case, the array is not copied, rather, a reference to it is saved. Thus, changes to the array (addition or removal of elements) later will be immediately reflected in the list of active handlers.


Removes a specific handler, or all handlers, from the handler chain for a given event type.


Convenience functions for registering a handler with a specific event.


Enables or disables keyboard state tracking. By default, keypresses trigger the sequence of events keydown, keyup, keypress. If keyboard state tracking is enabled, then the event object will have an additional field, keyboard containing the current state of the keyboard. That is, keyboard[k] is true if the key with key-code k is current depressed, and false otherwise. This is useful when you are interested in knowing the current state of the keyboard in all events, and don't care so much about when the keyboard state changes.

Color and gradient handling

rgb(r,g,b,a) (global function)

Returns a CSS-style color specifier (which can be used in Flextime almost anywhere where a color is expected) with the specified RGBA components. If a is omitted, the alpha defaults to 1.0.

new Color(r,g,b,a) (type constructor)

Constructs a new Color instance. Color instances have fields .r, .g, .b and .a, making it easy to examine and modify their color components.

c1.lerp(x,c2) (Color method)

Linearly interpolates between c1 and c2 by the amount x.


Returns a random "pleasant" color. This function tries to avoid generating extreme colors (e.g., fully saturated, too close to white or black, etc.) and thus tends to produce pastels.

new Gradient(stops...) (type constructor)

Constructs a new Gradient instance. The argument list, if present, should be a sequence of stop,color pairs, where each stop is a floating-point value.

.get(position) (Gradient method)

Returns the value of the gradient at the specified position, interpolating between stops as needed.

.add(stop,color) (Gradient method)

Adds a new stop to a gradient, with the specified color. Stops need not be added in any particular order.