W2261 Paths

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

Complex Shapes Using Paths

Arbitrarily complex shapes may be constructed using Paths. Paths are built of primitives enabling us to add straight lines or curves and then finally rendering the path by stroking or filling.

Helpful Hint

Practice the below using the Igis Path Demo

Try it now in a separate window.

• You'll note that there are a series of buttons on the left hand side enabling you to add primitives to the path.
• After clicking on the button, you'll see the new primitive added to the center of the canvas. Each primitive will have one or more control handles which you can drag to alter the parameters of the primitive.
• On the right hand side is the actual code used to create the displayed path.
• To begin again with a blank path, simply refresh the browser.

Adding Shapes Comprised of Straight Lines

• To add a series of points forming one or more lines, we have the option to use two different primitives, moveTo and lineTo:
  • To move to a new position without drawing a line, we use the moveTo() method on a path.
  • To draw a line to a new position continuing from the previous position, we use the lineTo() method on a path.

Try it now. Use the moveTo(point:Point) and lineTo(point:Point) primitives to:

• Create a horizontal line
• Create an 'L' shape
• Create a rectangle
• Create three, isolated (not connected to one another) vertical bars
• Create a trapezoid
• Create a rhombus

Adding Rectangles

• Rather than use a moveTo() followed by four lineTo()s, we can create a rectangle with a single primitive, rect().

Key Concepts

• A path is built of primitives
• The moveTo(point:Point) primitive moves the current context point to the specified location
• The lineTo(point:Point) primitive draws a line from the current context point to the specified location
• The rect(rect:Rect) primitive draws a rectangle as described in rect