shape

<shap> creates a shape within a <graphics>.

The shape can be defined in two different ways: through a SVG-like string, or children nodes.

Properties

Property	Notes
x	Horizontal position
y	Vertical position
s	String represented the shape to draw, similar to SVG

Style

Property	Type	Default	Notes
fill	number	transparent	Fill color
fillAlpha	number	1	Defines fill color transparency. Between 0 (transparent) and 1 (opaque)
stroke	number	0x000000	Line color; a line is rendered if any of stroke, strokeWidth or strokeAlpha is defined
strokeWidth	number	1	Line width, in pixels
strokeAlpha	number	1	Line color transparency

Children

The following child nodes can be used to create a shape. They always inherit the shape style.

• <line>
• <lineto>
• <lineto>
• <curveto>
• <rect>
• <circle>

String shape

Alternatively, a shape can de defined with a string (property s). The string must be a sequence of commands, where each command starts with a letter, determining the command, followed by a list of comma-separated numeric values. The available commands are:

• a: arc; values: x, y, radius, startAngle, endAngle, anticlockwise, segments
• m: move; values: x, y
• l: line to; values: x, y
• b: bezier curve to; values: control point x, control point y, control point 2 x, control point 2 y, x, y
• q: quadratic curve to; values: control point x, control point y, x, y
• c: circle; values: x, y, diameter
• e: ellipse; values: x, y, width, height
• r: rect; values: x, y, width, height
• d: rounded rect; values: x, y, width, height, radius