Not logged in

Flextime instances

The first step to using Flextime is to create a Flextime instance from an existing element (which need not be a canvas). You do this using the jQuery method flexify:

$("#mycanvas").flexify(function (f) {

flexify will replace the specified element(s) with a canvas and then call the function passed to it. The function will be passed a Flextime instance, here in the argument f. Almost all operations on the canvas happen through this instance:

$("#mycanvas").flexify(function (f) {

  // Party on, dudes...

Here, we setup the canvas to have a size of 256x256 pixels, a default fill color of green, and a stroke color of black.

Flextime methods

Almost all Flextime instance methods are chainable (only those that return a value are not). For a complete reference to Flextime methods, see the Flextime core module documentation.

If you ever need to manually access the underlying Canvas, you can access the current rendering context via the instance's .ctx member.

Global functions

Although Flextime tries to play nice and not stomp all over the global scope, it does install a few global convenience functions.


The rgb function lets you quickly construct a Color from its RGBA components. If the alpha component is omitted, it defaults to 1.0. rgb can be called with a single numeric argument, in which case it constructs a grayscale color with 100% alpha.


Only available if the colors module is loaded, the color function tries to create a Color from a color name. See the colors module documentation for a full description of the available color name schemes, but here are a few examples:

color("very light green")