Using Different Stroke Styles and Line Widths

As shown in the preceding examples, you use a digital pen to draw your shapes. What I have not mentioned is that you can configure this digital pen by changing the value of the strokeStyle and lineWidth attributes of the LzDrawView object.

For example, the code in Listing 10.6 shows how you can draw ovals by using nonstandard pen.

Listing 10.6. Configuring the LzDrawView pen

<canvas height="200">
    <drawview height="200" width="600">
        <method event="oninit">
            this.lineWidth = 5;
            this.strokeStyle = 0xff00ff;
            this.oval(100, 100, 75, 30);
            this.stroke();

            this.beginPath();
            this.lineWidth = 10;
            this.strokeStyle = 0xff0000;
            this.oval(300, 100, 75);
            this.stroke();

        </method>
    </drawview>
</canvas>

You need to call the beginPath method so that the subsequent lineWidth and strokeStyle does not affect the previous one. To test this application, direct your browser to this URL:

http://localhost:8080/lps-4.0.x/app10/strokeStyleTest1.lzx

Figure 10.6 shows the generated application