The Tk Canvas Widget

The canvas widget in the Tk graphical user interface toolkit is a free software tool used to present graphical data. Like the Tk text widget, which I discussed in my previous article, the canvas widget is accessible from most modern scripting languages, including Tcl, Perl and Python. It provides those languages with a best of breed facility for structured graphics work.

A canvas widget can be thought of as a blank piece of paper upon which lines, shapes, text, images and other Tk widgets can be drawn. These items, once drawn, can be reconfigured in order to change their positions, colour, size, format or contents. They also can be given abilities to respond to input from the user or to react to changes when data is manipulated elsewhere in the script.

The canvas widget isn't a solution to any particular problem; rather it is an extremely flexible tool that allows developers to build solutions quickly and easily for all sorts of problems. This article describes some of the facilities canvas widget provides and suggests some uses for them.

When using the canvas widget, the basic idea is to draw what are known as items. An item can be a line, an image, some text, one of a number of geometric shapes and so on. See the table below for a description of the item types that can be drawn and manipulated. Figure 1 shows a screenshot of a canvas widget displaying some of these items.

Figure 1. A Canvas Widget Displaying Some of the Supported Item Types

Exactly how an item is drawn depends on the options with which it is configured. Many dozens of options are available, and this article discusses and demonstrates some of them. See the canvas widget man page for a comprehensive list of all the options available.

When an item is drawn on a canvas it becomes an independent entity. Each individual item is given a unique ID that the developer can use to reconfigure the item's options. When any of an item's options are changed, the canvas widget ensures the item is redrawn with its new configuration. Not only does this redrawing happen immediately, it also is quick enough to support animations and direct mouse control of hundreds or possibly thousands of items.

As well as their unique Tk-assigned IDs, items also can be tagged with one or more names chosen by the developer. Tags work in the same way as those offered by the Tk text widget. As well as providing an easier way to reference a single item (a sensible name instead of a number), this tagging mechanism also allows items to be grouped together logically. All items given the same tag can be treated as one single item.

Once an item has been given one or more tags, the canvas widget allows pieces of code to be bound to those tags. This is the feature of the canvas widget that enables dynamic behaviour. I covered the tag and bind approach in some detail in my article on the Tk text widget. Because the principles and implementation are virtually identical for the canvas widget, I am not going to repeat the information here. A simple example of tag and bind applied to a canvas item should suffice:

.canvas create line 0 0 100 100 -tag diagonal_line
.canvas bind diagonal_line <Double-Button-1> {
    puts "Leave that alone!"
}

This creates a line item on the canvas from point 0,0 to point 100,100 and tags it with the name diagonal_line. If the user double-clicks mouse button one on the line (or any other item with the tag diagonal_line) a message is printed. Most uses of the canvas widget use this tag and bind approach extensively