Drawing Properties

« Lines and Rectangles | UserGuide | Polygons »

The canvas stores the drawing context or drawing properties — color, font, line style, etc. — that are used when drawing shapes and text. For example, when you first start drawing on a canvas, all shapes are drawn in black outline form.

The drawing properties are used for all shapes and text until they are changed. In this section, we explore the drawing properties used with geometric shapes and the canvas methods used to change them. The drawing properties used to draw text on the canvas will be covered in a later section.

Specifying Colors

Colors are used for shapes, text and the canvas background. There are different ways to specify color for use in computer applications. One of the most common is with the use of the discrete RGB color space, in which the individual colors are specified by three intensity values or components within the range [0…255]. The three values correspond to the amount of light from the three primary colors — red, green, and blue — that must be added or mixed to produce a given color. An intensity value of 0 indicates no light while a value of 255 indicates full intensity. Thus, when all three values are 0, the result is black and when all three values are 255, the result is white. Colors of different hues and shades are produced by varying the three intensity values. For example, if we add equal proportions of red and green light, the result is yellow

The intensity of the yellow, however, depends on the intensity level of the red and green light

The RGB values needed to create some of the more common colors, out of a possible 16.7+ million, are shown in the tables below.

To illustrate how colors are specified in EzGraphics, let’s change the color of the canvas from the default white to a light yellow color known as light goldenrod. This can be done using the setBackground() canvas method

In the following code segment, we call the setBackground() method and pass it the appropriate RGB values for the new color, the result of which is shown to the right.

win = GraphicsWindow() win.setTitle("Yellow Background") canvas = win.canvas() # Set the canvas color. canvas.setBackground(255, 255, 224)   # Draw two rectangles. canvas.drawRectangle(40, 40, 100, 200) canvas.drawRectangle(200, 200, 150, 50) win.wait() [$[Get Code]]

Note The color of the canvas can be changed at any point after creating the graphics window. Changing the color does not affect any shapes or text that were previously drawn on the canvas.

For convenience, EzGraphics also allows you to specify a color by name, which must be a string containing one of the predefined color names. To set the background color by name, use the method call

For example, we can change the background color of the canvas to light green using the method call

without having to know the actual RGB values necessary to produce the color.

Color Properties

When you first start drawing on a canvas, the geometric shapes are drawn in outline form with black lines

But a geometric shape can also be filled with a color

When a geometric shape is drawn on the canvas, the colors used to draw the shape are based on two drawing properties: the outline color and the fill color.

Outline Color

To set the outline color used to draw new shapes call one of the setOutline() canvas methods

For example, the method call

sets the outline color to red. If we draw a shape after setting the outline color,

it will be drawn with a red outline

Fill Color

To draw a shape that is filled, you must first set the fill color using one of the setFill() methods

For example, the method call

sets the fill color to yellow. If we draw a shape on the canvas after setting the fill color

it will be drawn with the inside filled in yellow

Note Changing the outline or fill color property only affects shapes that are drawn after the color is set. It has no affect on shapes drawn before the property is changed.

Sometimes, you may want to draw a shape that is filled and outlined in the same color. For convenience, both properties can be set to the same color using one of the setColor() methods

For example, the following code segment

produces a rectangle that is both filled and outlined in green

Transparent Shapes

Once set, the fill color will be used when drawing new shapes on the canvas. But what if you want to draw a new transparent or unfilled shape that is only outlined? The fill color has to be cleared, leaving only the outline color. This is done by calling the setFill() method with no arguments

This is necessary when drawing multiple shapes where some are filled and others are only outlined, especially if the shapes overlap. For example, consider the following code segment which draws several overlapping rectangles

canvas.setBackground(240, 240, 240) canvas.setFill("yellow") canvas.drawRectangle(125, 40, 50, 200) canvas.setOutline("magenta") canvas.setFill("green") canvas.drawRectangle(50, 110, 200, 50) canvas.setColor("blue") canvas.drawRectangle(150, 225, 100, 30) canvas.setFill() canvas.setOutline("black") canvas.drawRectangle(110, 80, 30, 120) [$[Get Code]]

Note Shapes are drawn on the canvas in the order the commands are executed. Thus, filled shapes drawn on the canvas will cover shapes drawn earlier.

Line Properties

The style and size of lines drawn on the canvas are based on the current settings of two drawing properties: line style and line width. These properties affect not only line segments and arrows, but also the outlines of the various geometric shapes.

Line Width

The width of a line can be changed from the default of 1 pixel to any positive integer size using the setLineWidth() canvas method

The new width is used for all new shapes drawn on the canvas until changed with another call to the method. For example, we can change the line width to draw two rectangles with different outline sizes

which produces

Line Style

EzGraphics currently supports two line styles: solid and dashed. To change the style used to draw new lines on the canvas, use the setLineStyle() canvas method

in which the new style is indicated as a string. For example, to draw a dashed outlined rectangle, we can change to the dashed style before drawing the shape

which produces

To reset the line style back to the default solid style, you pass “solid” to the method

Sample Program

The following program is a modified version of the earlier barchart1.py program. This version uses color for the bars and thicker lines for the axes.

« Lines and Rectangles | UserGuide | Polygons »