Drawing Fast Shapes

These functions are used to draw almost all the FLTK widgets. They draw on exact pixel boundaries and are as fast as possible. Their behavior is duplicated exactly on all platforms FLTK is ported. It is undefined whether these are affected by the transformation matrix, so you should only call these while the matrix is set to the identity matrix (the default).

fltk.fl_point(intx, inty)

Draw a single pixel at the given coordinates.

fltk.fl_rectf(intx, inty, intw, inth)
fltk.fl_rectf(intx, inty, intw, inth)

Color a rectangle that exactly fills the given bounding box.

fltk.fl_rectf(intx, inty, intw, inth, ucharr, ucharg, ucharb)

Color a rectangle with "exactly" the passed r,g,b color. On screens with less than 24 bits of color this is done by drawing a solid-colored block using fl_draw_image() so that the correct color shade is produced.

fltk.fl_rect(intx, inty, intw, inth)
fltk.fl_rect(intx, inty, intw, inth, Fl_Color c)

Draw a 1-pixel border inside this bounding box.

fltk.fl_line(intx, inty, intx1, inty1)
fltk.fl_line(intx, inty, intx1, inty1, intx2, inty2)

Draw one or two lines between the given points.

fltk.fl_loop(intx, inty, intx1, inty1, intx2, inty2)
fltk.fl_loop(intx, inty, intx1, inty1, intx2, inty2, intx3, inty3)

Outline a 3 or 4-sided polygon with lines.

fltk.fl_polygon(intx, inty, intx1, inty1, intx2, inty2)
fltk.fl_polygon(intx, inty, intx1, inty1, intx2, inty2, intx3, inty3)

Fill a 3 or 4-sided polygon. The polygon must be convex.

fltk.fl_xyline(intx, inty, intx1)
fltk.fl_xyline(intx, inty, intx1, inty2)
fltk.fl_xyline(intx, inty, intx1, inty2, intx3)

Draw horizontal and vertical lines. A horizontal line is drawn first, then a vertical, then a horizontal.

fltk.fl_yxline(intx, inty, inty1)
fltk.fl_yxline(intx, inty, inty1, intx2)
fltk.fl_yxline(intx, inty, inty1, intx2, inty3)

Draw vertical and horizontal lines. A vertical line is drawn first, then a horizontal, then a vertical.

fltk.fl_arc(intx, inty, intw, inth, doublea1, doublea2)
fltk.fl_pie(intx, inty, intw, inth, doublea1, doublea2)

Draw ellipse sections using integer coordinates. These functions match the rather limited circle drawing code provided by X and WIN32. The advantage over using fl_arc with floating point coordinates is that they are faster because they often use the hardware, and they draw much nicer small circles, since the small sizes are often hard-coded bitmaps.

If a complete circle is drawn it will fit inside the passed bounding box. The two angles are measured in degrees counterclockwise from 3'oclock and are the starting and ending angle of the arc, a2 must be greater or equal to a1.

fl_arc() draws a series of lines to approximate the arc. Notice that the integer version of fl_arc() has a different number of arguments than the fl_arc() function described later in this chapter.

fl_pie() draws a filled-in pie slice. This slice may extend outside the line drawn by fl_arc; to avoid this use w - 1 and h - 1.

fltk.fl_scroll(intX, intY, intW, intH, intdx, intdy, void (*draw_area)(void*, int,int,int,int), void* data)

Scroll a rectangle and draw the newly exposed portions. The contents of the rectangular area is first shifted by dx and dy pixels. The callback is then called for every newly exposed rectangular area,

Drawing Complex Shapes

The complex drawing functions let you draw arbitrary shapes with 2-D linear transformations. The functionality matches that found in the Adobe® PostScriptTM language. The exact pixels that are filled are less defined than for the fast drawing functions so that FLTK can take advantage of drawing hardware. On both X and WIN32 the transformed vertices are rounded to integers before drawing the line segments: this severely limits the accuracy of these functions for complex graphics, so use OpenGL when greater accuracy and/or performance is required.


Save and restore the current transformation. The maximum depth of the stack is 4.

fltk.fl_scale(floatx, floaty)
fltk.fl_translate(floatx, floaty)
fltk.fl_mult_matrix(floata, floatb, floatc, floatd, floatx, floaty)

Concatenate another transformation onto the current one. The rotation angle is in degrees (not radians) and is counter-clockwise.

double fl_transform_x(double x, double y)
double fl_transform_y(double x, double y)
double fl_transform_dx(double x, double y)
double fl_transform_dy(double x, double y)
fltk.fl_transformed_vertex(double xf, double yf)

Transform a coordinate or a distance trough the current transformation matrix. After transforming a coordinate pair, it can be added to the vertex list without any forther translations using fl_transformed_vertex.


Start and end drawing a list of points. Points are added to the list with fl_vertex.


Start and end drawing lines.


Start and end drawing a closed sequence of lines.


Start and end drawing a convex filled polygon.


Start and end drawing a complex filled polygon. This polygon may be concave, may have holes in it, or may be several disconnected pieces. Call fl_gap() to seperate loops of the path. It is unnecessary but harmless to call fl_gap() before the first vertex, after the last one, or several times in a row.


For portability, you should only draw polygons that appear the same whether "even/odd" or "non-zero" winding rules are used to fill them. Holes should be drawn in the opposite direction of the outside loop.

fl_gap() should only be called between fl_begin_complex_polygon() and fl_end_complex_polygon(). To outline the polygon, use fl_begin_loop() and replace each fl_gap() with fl_end_loop();fl_begin_loop().

fltk.fl_vertex(floatx, floaty)

Add a single vertex to the current path.

fltk.fl_curve(floatx, floaty, floatx1, floaty1, floatx2, floaty2, floatx3, floaty3)

Add a series of points on a Bezier curve to the path. The curve ends (and two of the points) are at x,y and x3,y3.

fltk.fl_arc(floatx, floaty, floatr, floatstart, floatend)

Add a series of points to the current path on the arc of a circle; you can get elliptical paths by using scale and rotate before calling fl_arc(). x,y are the center of the circle, and r is its radius. fl_arc() takes start and end angles that are measured in degrees counter-clockwise from 3 o'clock. If end is less than start then it draws the arc in a clockwise direction.

fltk.fl_circle(floatx, floaty, floatr)

fl_circle() is equivalent to fl_arc(...,0,360) but may be faster. It must be the only thing in the path: if you want a circle as part of a complex polygon you must use fl_arc().


fl_circle() draws incorrectly if the transformation is both rotated and non-square scaled.

Drawing Text

All text is drawn in the current font. It is undefined whether this location or the characters are modified by the current transformation.

fltk.fl_draw(const char *, intx, inty)
fltk.fl_draw(const char *, intn, intx, inty)

Draw a nul-terminated string or an array of n characters starting at the given location. Text is aligned to the left and to the baseline of the font. To align to the bottom, subtract fl_descent() from y. To align to the top, subtract fl_descent() and add fl_height(). This version of fl_draw provides direct access to the text drawing function of the underlying OS. It does not apply any special handling to control characters.

fltk.fl_draw(const char *, intx, inty, intw, inth, Fl_Align align, Fl_Image *img = 0, intdraw_symbols = 1)

Fancy string drawing function which is used to draw all the labels. The string is formatted and aligned inside the passed box. Handles '\t' and '\n', expands all other control characters to ^X, and aligns inside or against the edges of the box described by x, y, w and h. See Fl_Widget::align() for values for align. The value FL_ALIGN_INSIDE is ignored, as this function always prints inside the box.

If img is provided and is not NULL, the image is drawn above or below the text as specified by the align value.

The draw_symbols argument specifies whether or not to look for symbol names starting with the "@" character.

The text length is limited to 1024 caracters per line.

fltk.fl_measure(const char *, int&w, int&h, intdraw_symbols = 1)

Measure how wide and tall the string will be when printed by the fl_draw(...align) function. If the incoming w is non-zero it will wrap to that width.

int fl_height()

Recommended minimum line spacing for the current font. You can also just use the value of size passed to fl_font().

int fl_descent()

Recommended distance above the bottom of a fl_height() tall box to draw the text at so it looks centered vertically in that box.

floatfl_width(const char*)
floatfl_width(const char*, intn)

Return the pixel width of a nul-terminated string, a sequence of n characters, or a single character in the current font.

const char *fl_shortcut_label(ulong)

Unparse a shortcut value as used by Fl_Button or Fl_Menu_Item into a human-readable string like "Alt+N". This only works if the shortcut is a character key or a numbered function key. If the shortcut is zero an empty string is returned. The return value points at a static buffer that is overwritten with each call.


FLTK supports a set of standard fonts based on the Times, Helvetica/Arial, Courier, and Symbol typefaces, as well as custom fonts that your application may load. Each font is accessed by an index into a font table.

Initially only the first 16 faces are filled in. There are symbolic names for them: FL_HELVETICA, FL_TIMES, FL_COURIER, and modifier values FL_BOLD and FL_ITALIC which can be added to these, and FL_SYMBOL and FL_ZAPF_DINGBATS. Faces greater than 255 cannot be used in Fl_Widget labels, since Fl_Widget stores the index as a byte.

fltk.fl_font(intface, intsize)

Set the current font, which is then used by the routines described above. You may call this outside a draw context if necessary to call fl_width(), but on X this will open the display.

The font is identified by a face and a size. The size of the font is measured in pixels and not "points". Lines should be spaced size pixels apart or more.

int fl_font()
int fl_size()

Returns the face and size set by the most recent call to fl_font(a,b). This can be used to save/restore the font.

Character Encoding

FLTK 1 supports western character sets using the eight bit encoding of the user-selected global code page. For MS Windows and X11, the code page is assumed to be Windows-1252/Latin1, a superset to ISO 8859-1. On Mac OS X, we assume MacRoman.

FLTK provides the functions fl_latin1_to_local, fl_local_to_latin1, fl_mac_roman_to_local, and fl_local_to_mac_roman to convert strings between both encodings. These functions are only required if your source code contains "C"-strings with international characters and if this source will be compiled on multiple platforms.

Assuming that the following source code was written on MS Windows, this example will output the correct label on OS X and X11 as well. Without the conversion call, the label on OS X would read Fahrvergn¸gen with a deformed umlaut u.

  btn = new Fl_Button(10, 10, 300, 25);


If your application uses characters that are not part of both encodings, or it will be used in areas that commonly use different code pages, yoou might consider upgrading to FLTK 2 which supports UTF-8 encoding.

Drawing Overlays

These functions allow you to draw interactive selection rectangles without using the overlay hardware. FLTK will XOR a single rectangle outline over a window.

fltk.fl_overlay_rect(intx, inty, intw, inth);

fl_overlay_rect() draws a selection rectangle, erasing any previous rectangle by XOR'ing it first. fl_overlay_clear() will erase the rectangle without drawing a new one.

Using these functions is tricky. You should make a widget with both a handle() and draw() method. draw() should call fl_overlay_clear() before doing anything else. Your handle() method should call window()->make_current() and then fl_overlay_rect() after FL_DRAG events, and should call fl_overlay_clear() after a FL_RELEASE event.

Drawing Images

To draw images, you can either do it directly from data in your memory, or you can create a Fl_Image object. The advantage of drawing directly is that it is more intuitive, and it is faster if the image data changes more often than it is redrawn. The advantage of using the object is that FLTK will cache translated forms of the image (on X it uses a server pixmap) and thus redrawing is much faster.

Direct Image Drawing

The behavior when drawing images when the current transformation matrix is not the identity is not defined, so you should only draw images when the matrix is set to the identity.

fltk.fl_draw_image(const uchar *, intX, intY, intW, intH, intD = 3, intLD = 0)
fltk.fl_draw_image_mono(const uchar *, intX, intY, intW, intH, intD = 1, intLD = 0)

Draw an 8-bit per color RGB or luminance image. The pointer points at the "r" data of the top-left pixel. Color data must be in r,g,b order. X,Y are where to put the top-left corner. W and H define the size of the image. D is the delta to add to the pointer between pixels, it may be any value greater or equal to 3, or it can be negative to flip the image horizontally. LD is the delta to add to the pointer between lines (if 0 is passed it uses W * D), and may be larger than W * D to crop data, or negative to flip the image vertically.

It is highly recommended that you put the following code before the first show() of any window in your program to get rid of the dithering if possible:

Gray scale (1-channel) images may be drawn. This is done if abs(D) is less than 3, or by calling fl_draw_image_mono(). Only one 8-bit sample is used for each pixel, and on screens with different numbers of bits for red, green, and blue only gray colors are used. Setting D greater than 1 will let you display one channel of a color image.


The X version does not support all possible visuals. If FLTK cannot draw the image in the current visual it will abort. FLTK supports any visual of 8 bits or less, and all common TrueColor visuals up to 32 bits.

typedef void (*fl_draw_image_cb)(void *, intx, inty, intw, uchar*)
fltk.fl_draw_image(fl_draw_image_cb, void *, intX, intY, intW, intH, intD = 3)
fltk.fl_draw_image_mono(fl_draw_image_cb, void *, intX, intY, intW, intH, intD = 1)

Call the passed function to provide each scan line of the image. This lets you generate the image as it is being drawn, or do arbitrary decompression of stored data, provided it can be decompressed to individual scan lines easily.

The callback is called with the void * user data pointer which can be used to point at a structure of information about the image, and the x, y, and w of the scan line desired from the image. 0,0 is the upper-left corner of the image, not X,Y. A pointer to a buffer to put the data into is passed. You must copy w pixels from scanline y, starting at pixel x, to this buffer.

Due to cropping, less than the whole image may be requested. So x may be greater than zero, the first y may be greater than zero, and w may be less than W. The buffer is long enough to store the entire W * D pixels, this is for convenience with some decompression schemes where you must decompress the entire line at once: decompress it into the buffer, and then if x is not zero, copy the data over so the x'th pixel is at the start of the buffer.

You can assume the y's will be consecutive, except the first one may be greater than zero.

If D is 4 or more, you must fill in the unused bytes with zero.

int fl_draw_pixmap(char **data, intX, intY, Fl_Color = FL_GRAY)

Draws XPM image data, with the top-left corner at the given position. The image is dithered on 8-bit displays so you won't lose color space for programs displaying both images and pixmaps. This function returns zero if there was any error decoding the XPM data.

To use an XPM, do:

Transparent colors are replaced by the optional Fl_Color argument. To draw with true transparency you must use the Fl_Pixmap class.

int fl_measure_pixmap(char **data, int&w, int&h)

An XPM image contains the dimensions in its data. This function finds and returns the width and height. The return value is non-zero if the dimensions were parsed ok and zero if there was any problem.

Direct Image Reading

FLTK provides a single function for reading from the current window or off-screen buffer into a RGB(A) image buffer.

uchar *fl_read_image(uchar *p, intX, intY, intW, intH, intalpha = 0);

Read a RGB(A) image from the current window or off-screen buffer. The p argument points to a buffer that can hold the image and must be at least W*H*3 bytes when reading RGB images and W*H*4 bytes when reading RGBA images. If NULL, fl_read_image() will create an array of the proper size which can be freed using delete[].

The alpha parameter controls whether an alpha channel is created and the value that is placed in the alpha channel. If 0, no alpha channel is generated.

Image Classes

FLTK provides a base image class called Fl_Image which supports creating, copying, and drawing images of various kinds, along with some basic color operations. Images can be used as labels for widgets using the image() and deimage() methods or drawn directly.

The Fl_Image class does almost nothing by itself, but is instead supported by three basic image types:

The Fl_Bitmap class encapsulates a mono-color bitmap image. The draw() method draws the image using the current drawing color.

The Fl_Pixmap class encapsulates a colormapped image. The draw() method draws the image using the colors in the file, and masks off any transparent colors automatically.

The Fl_RGB_Image class encapsulates a full-color (or grayscale) image with 1 to 4 color components. Images with an even number of components are assumed to contain an alpha channel that is used for transparency. The transparency provided by the draw() method is either a 24-bit blend against the existing window contents or a "screen door" transparency mask, depending on the platform and screen color depth.

char fl_can_do_alpha_blending()

fl_can_do_alpha_blending() will return 1, if your platform supports true alpha blending for RGBA images, or 0, if FLTK will use screen door transparency.

FLTK also provides several image classes based on the three standard image types for common file formats:

Each of these image classes load a named file of the corresponding format. The Fl_Shared_Image class can be used to load any type of image file - the class examines the file and constructs an image of the appropriate type.

Finally, FLTK provides a special image class called Fl_Tiled_Image to tile another image object in the specified area. This class can be used to tile a background image in a Fl_Group widget, for example.

virtual void copy();
virtual void copy(intw, inth);

The copy() method creates a copy of the image. The second form specifies the new size of the image - the image is resized using the nearest-neighbor algorithm.

void draw(intx, inty, intw, inth, intox = 0, intoy = 0);

The draw() method draws the image object. x,y,w,h indicates a destination rectangle. ox,oy,w,h is a source rectangle. This source rectangle is copied to the destination. The source rectangle may extend outside the image, i.e. ox and oy may be negative and w and h may be bigger than the image, and this area is left unchanged.

void draw(intx, inty)

Draws the image with the upper-left corner at x,y. This is the same as doing draw(x,y,img->w(),img->h(),0,0).

Offscreen Drawing

Sometimes it can be very useful to generate a complex drawing in memory first and copy it to the screen at a later point in time. This technique can significantly reduce the amount of repeated drawing. Fl_Double_Window uses offscreen rendering to afltk.flickering on systems that don't support double-buffering natively.

Fl_Offscreen fl_create_offscreen(intw, inth)

Create an RGB offscreen buffer with w*h pixels.

Fl_Offscreen fl_create_offscreen_with_alpha(intw, inth)

Create an RGBA offscreen buffer. Alpha blending is not available on all platforms.


Delete a previously created offscreen buffer. All drawings are lost.


Send all subsequent drawing commands to this offscreen buffer. FLTK can draw into a buffer at any time. There is no need to wait for an Fl_Widget::draw() to occur.


Quit sending drawing commands to this offscreen buffer.

fltk.fl_copy_offscreen(intx, inty, intw, inth, Fl_Offscreen osrc, intsrcx, intsrcy)

Copy a rectangular area of the size w*h from srcx, srcy in the offscreen buffer into the current buffer at x, y.