OpenLaszlo provides capability to do two-dimensional graphics. You use procedural code in a <drawview> element to draw lines and fill in shapes. In this tutorial we'll look at some of the key parts of the API and show some interesting effects that you can get with a few lines of code.

The Web Hypertext Application Technology Working Group ("WHATWG") is "a loose unofficial collaboration of Web browser manufacturers and interested parties who wish to develop new technologies designed to allow authors to write and deploy Applications over the World Wide Web." This group recently published a specification for drawing (which can be found here). OpenLaszlo implements a subset of the whatwg drawing APIs. For a discussion of where OpenLaszlo differs from the full whatwg specification, please see the LZX Reference Manual.

The <drawview> class extends the <view> class. Thus, it inherits all the <view> properties; a <drawview> tag creates a rectangular view. At first glance a view seems like just another view: Previously, <drawview> auto-sized when OpenLaszlo only supported Flash. To make this work in DHTML and Flash consistently, size must now be explicitly set, because DHTML doesn't support autosize. size can be changed at runtime, but it may clear the canvas, in which case a new oncontext event is sent to signal a redraw is needed. size need not be a fixed value; it can also be set to percentage values or constraint values. There are no additional tag attributes in the drawview class beyond those of view. However, drawview has four attributes in addition to those it inherits: fillStyleglobalAlphalineWidthstrokeStyle These attributes can be accessed and manipulated by procedural (script) code inside <method> tags inside a <drawview> element. The drawview class has ten methods associated with it. We'll take a look at them below, after explaining some more concepts.

To draw a line shape (or "path"), you position a logical pen at a starting point and then move it sequentially to x and y coordinates connecting points either by straight or quadratic lines. This line remains invisible until you "stroke" it. When you stroke a path you apply to it the defined line width and style, thereby making it visible. For example, this code produces nothing visible: <canvas height="200" proxied="false"> <drawview height="50" width="50"> <handler name="oninit"> this.moveTo(100,100) this.lineTo(200,100) this.quadraticCurveTo(120, 200, 300, 100) </handler> </drawview> </canvas> But by adding the line this.stroke() we produce the following: The closePath method draws a line back to the beginning of the current path: Now that we have a closed shape, we can fill it. First we define a fillStyle, and then we fill the shape. Note that if you don't close a path but call the fill() method, the path will be closed implicitly. Please consult the reference page for particulars.

The globalAlpha attribute is used to set the opacity of lines and fills. It takes a value between zero (transparent) and one (opaque). Remember that the code here is procedural, so alpha values apply to fillStyles and lineStyles that are in effect at the time that a stroke() or fill() method is called. In the above example, the globalAlpha value is 1 (the default) when the line is stroked and .3 when the color is filled in. A fillStyle can be a color gradient, that is, a pattern that blends colors over its area. To use a gradient, first create it using the appropriate (linear or radial) constructor function, then set the fillStyle to be the gradient. A gradient is an object of the type LzCanvasGradientlz.CanvasGradient; you define the parameters of the gradient by using methods such as addColorStop on it. addColorStop takes two arguments: the number of the stop, and the color. To get a sense of what gradients look like, try varying the parameters of the ending x and y. Also, remember that drawviews have background colors. You can use them in conjunction with gradients and alpha values: The gradient can be linear or radial (for details, see the Reference).

We've said that drawing a line is like moving a pen. So, how do you pick up the pen in order to move it to another spot on the canvas? Use the beginPath method. The clear method wipes the slate clean, so to speak.

Although the drawview<drawview>[unknown tag] API is procedural, it's simple to blend the procedural drawing API with the declarative LZX style. The following little program illustrates this. The r attribute is modulated in by an animator<animator>[unknown tag] element; when r changes, the redraw method is evoked. OpenLaszlo developers have already used the drawview API to create a color chooser and a paint program. See what you can do. Have fun!