Back to Contents

Canvas

This page describes the usage of Canvas.

• What is Canvas?
• Basics
• Functions

See also: Forms, Windows

What is Canvas?

By using Canvas you can draw simple shapes in a specific area of a form. Canvas can draw lines, rectangles, ovals, circles, texts, arcs, and polygons. Keys can be bound to graphical elements for selection with a right or left mouse click.

In programs, you select a given Canvas area by name and you create the shapes in the Abstract User Interface tree by using the built-in DOM API.

The painted canvas is automatically displayed on the front end when an interactive instruction is executed (like MENU or INPUT).

The canvas area represents an abstract drawing page where you define size and location of shapes with coordinates from (0,0) to (1000,1000). The origin point  (0,0), is on the left-bottom of the drawing area.

Each canvas element is identified by a unique number (id). You can use this identifier to bind mouse clicks to canvas elements.

Basics

Purpose:

Use Canvas to draw simple shapes in a specific area of a form. 

Syntax:

Notes:

1. You define the content of canvas areas in the Abstract User Interface tree.
2. If the form defines canvas areas, the Abstract User Interface tree contains empty <Canvas> nodes that you can fill with canvas items.
3. A canvas node is identified in the program by the colName attribute.
4. You can get the canvas DomNode by name with the Window.getElement(name) method.
5. You cannot drop canvas nodes, as they are read-only in a form definition.

The following table describes all the types of canvas element that are supported:

The following table describes the attributes of canvas elements:

Usage:

First, you must define a drawing area in the form file. The drawing area is defined by a form field declared with the attribute WIDGET="CANVAS". In the following example, the name of the canvas field is 'canvas01'. This field name identifies the drawing area:

01 DATABASE FORMONLY
02 LAYOUT
03 GRID
04 {
05   Canvas example:
06   [ca01                         ]
07   [                             ]
08   [                             ]
09   [                             ]
10   [                             ]
11   [                             ]
12 }
13 END
14 END
15 ATTRIBUTES
16 CANVAS ca01 : canvas01;
17 END

In programs, you draw canvas shapes by creating Canvas nodes in the Abstract User Interface tree with the DOM API utilities.

Define a variable to hold the DOM node of the canvas and a second to handle children created for shapes:

01 DEFINE c, s om.DomNode

Define a window object variable; open a window with the form containing the canvas area; get the current window object, and then get the canvas DOM node:

02 DEFINE w ui.Window
03 OPEN WINDOW w1 WITH FORM "form1"
04 LET w = ui.Window.getCurrent()
05 LET c = w.findNode("Canvas","canvas01")

Create a child node with a specific type defining the shape:

06 LET s = c.createChild("CanvasLine")

Set attributes to complete the shape definition:

07 CALL s.setAttribute( "fillColor", "red" )
08 CALL s.setAttribute( "startX", 10 )
09 CALL s.setAttribute( "startY", 20 )
10 CALL s.setAttribute( "endX", 100 )
11 CALL s.setAttribute( "endY", 150 )
12 CALL s.setAttribute( "width", 2 )

To clear a given shape in the canvas, remove the element in the canvas node:

13 CALL c.removeChild(s)

To clear the drawing area completely, remove all children of the canvas node:

14 LET s=c.getFirstChild()
15 WHILE s IS NOT NULL
16   CALL c.removeChild(s)
17   LET s=c.getFirstChild()
18 END WHILE

Functions

The following table describes the built-in functions provided for backward compatibility with version 3. This list is provided to let you search for existing code using these functions. You should review that code and use the technique described in the sections above.