Drawing a curved path


Drawing an open path

Drawing a closed path

Bezier Curve


You can draw straight paths as well as curved paths of various shapes using the Pen Tool Namo WebCanvas icon toolpalette pen Drawing a curved path. You can draw accurate and complex contours of curved paths by handling multiple anchor points based on the principles of Bezier curve.

Drawing an open path

  1. Select the Pen Tool Namo WebCanvas icon toolpalette pen Drawing a curved path on the Tool Palette.
  2. Click on the Canvas to locate the starting anchor point.
  3. Click on the Canvas to locate the following anchor point, and drag the mouse to the opposite direction in respect to the displayed imaginary line drawn on the second anchor point. Release the mouse button when the path reaches the desired curve.
    • Drag the mouse downward. A curved path with its slope facing upward is created.
      Namo WebCanvas path curve up Drawing a curved path
    • Drag the mouse upward. A curved path with its slope facing downward is created.
      Namo WebCanvas path curve down Drawing a curved path
  1. Continue to add anchor points to draw complex curved paths.
    Namo WebCanvas path curve sin Drawing a curved path
  2. Select the Selection Tool Namo WebCanvas icon toolpalette select Drawing a curved path on the Tool Palette to complete the drawing.

Drawing a closed path

  1. Click on the Canvas to locate the starting anchor point using the Pen Tool Namo WebCanvas icon toolpalette pen Drawing a curved path on the Tool Palette.
  2. Add anchor points to draw curved paths.
    Namo WebCanvas draw curve close1 Drawing a curved path
  3. Link anchor points to join the curved paths.
  4. Click on the starting anchor point once more to complete the drawing.
    Namo WebCanvas draw curve close3 Drawing a curved path
  5. You can smooth out the curved paths using the curve handles and anchor point and apply various effects.
    Namo WebCanvas draw curve close4 Drawing a curved path

Bezier Curve

The Bezier curve is named after the French engineer Pierre Bezier, who developed this curve for car design in 1970′s. Now it is widely used in both the typesetting and drawing fields. Namo WebCanvas also uses Bezier curves for drawing curved paths. In Namo WebCanvas a curved path is made by joining multiple 3rd order (cubic) Bezier curve sections. A 3rd order Bezier curve is defined by 4 different points, with two points being on the curve and the others deciding the shape of the curve in between. The following graphs contain three 3rd order Bezier curves, making an open path. The ending anchor point of each Bezier curve is connected by the starting anchor point of the next section of the curve. You can continue drawing the path by adding Bezier curves to the path. The connected anchor points are designed to have the same tangent lines towards both previous and following sections, granting the connections with (first order) continuity.
A curved path that starts at anchor point A is affected by its neighboring anchor point B. A curve handle that has arms B1 and B2 starts from anchor point B and as you draw the curve handle to α particular direction, a curved path facing in the opposite direction is created. If you draw the curve handle to the β direction, the curved path faces downward, indicated by the imaginary line drawn between the two anchor points. The curved path starts at the starting anchor point and ends at the ending anchor point. The length and angle of the curve handle determine the length and slope of the curved path.

Namo WebCanvas bezier curve Drawing a curved path

You can create various curve paths using the method above. The more anchor points the curved paths have, the more fluid and realistic their shapes become.

Namo WebCanvas top Drawing a curved path

Drawing a curved path