The Tk Canvas Widget

The canvas widget in the Tk toolkit is a powerful free software tool for creating and manipulating structured graphics.

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.

Items, The Building Blocks

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

Range of Items the Canvas Widget Can Manipulate

Item TypeDescription
ArcAn arc shaped region, empty or filled
BitmapA simple, two colour image as is often used for an icon
ImageA full colour image such as a JPEG image
LineA line or sequence of lines, straight or bezier smoothed
OvalAn oval or circle, empty or filled
PolygonA multi-sided, irregular shaped region, empty or filled
RectangleA rectangle or square, empty or filled
TextSome text, either static or editable
WindowA Tk widget or set of widgets
OtherA user defined item type which must be coded in C

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.

IDs, Tags and Binding

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



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Re: The Tk Canvas Widget

Anonymous's picture

Mention also TkZinc -
Their Canvas-like inplementation has antialiasing, object hierarchy and some other extensions. They also rely on OpenGL for their drawing.

TkZinc has moved's picture

Worth mentionning tkzinc but its home page has moved to:

please forget which has passed away

(comment from dsna/dti (formerly cena) )

comment from dsna/dti (formerly cena)

Re: The Tk Canvas Widget

Anonymous's picture

Great article.

Re: The Tk Canvas Widget

Anonymous's picture

Nice article.

Love to see more, Tcl/Tk is a nice GUI toolkit.