A SketchCanvas document is a YAML formatted data with a list on the root node. The list contains one or more drawing objects. A drawing object is an element in a sketch, such as a line, a rectangle or a ellipse. A sketch consists of a collection of drawing objects.

Following is a list of drawing object types. All objects have a property named “type” that defines the type of the drawing object.

This object is always the first entry in the root list of the document.

- type: meta
  size: [550, 450]

Currently, this object contains only one property: size. The size defines the dimensions of the sketch, in pixels.

If a SketchCanvas document lacks this object, a meta object with default size: [934, 590] is automatically created.

A simple line with optional color and width specification.

- type: line
  points: '92,140:159,201'
  color: red
  width: 2

• points: A colon-separated list of point coordinates for the line. Currently only 2 points is allowed.
• color: Color of the line. Can be “black”, “blue”, “red” or “white”. If omitted, black is assumed.
• width: Width of the line. Can be 1, 2 or 3. If omitted, 1 is assumed.

A line with arrowhead on one end.

- type: arrow
  points: '71,265:168,214'
  color: blue
  width: 2

Properties are common with line object, except that an arrowhead is drawn on the second point.

A line with arrowheads on both ends.

- type: barrow
  points: '504,151:591,153'
  color: blue
  width: 2

Properties are common with line object, except that arrowheads are drawn on the both points.

An allow with double lines.

- type: darrow
  points: '33,128:65,174'
  color: blue
  width: 2

Properties are common with arrow object, except that two parallel lines are drawn.

A curve defined by 3 points.

- type: arc
  points: '56,118:155,42:245,125'
  color: blue
  width: 2

Properties are common with line object, except that “points” property contains 3 elements.

Note that this object is quadratic Bézier curve, so the second point (which is a control point) will not cross the curve itself. Probably we should name it “bezier” or something rather than “arc”.

A curve with an arrowhead on one end.

- type: arcarrow
  points: '59,185:152,143:229,183'
  color: blue
  width: 2

Properties are the same with arc object, except that an arrowhead is drawn on the last point.

A curve with an arrowhead on both ends.

- type: arcbarrow
  points: '65,238:161,205:218,243'
  color: blue
  width: 2

Properties are the same with arc object, except that arrowheads are drawn on the both ends.

A rectangle frame.

- type: rect
  points: '69,279:241,326'
  color: blue
  width: 2

Properties are common with line object, except that the two points define the diagonal of the rectangle instead of line ends.

An elliptical shape.

- type: ellipse
  points: '83,345:213,383'
  color: blue
  width: 2

Properties are common with line object, except that the two points define the diagonal of the bounding rectangle of the ellipse.

A filled rectangle.

- type: rectfill
  points: '76,398:230,434'
  color: blue
  width: 2

Properties are the same with rect object, except that the inside of the rectangle is filled with color.

A filled ellipse.

- type: ellipsefill
  points: '100,448:233,476'
  color: blue
  width: 2

Properties are the same with ellipse object, except that the inside of the ellipse is filled with color.

A pentagram star.

- type: star
  points: '76,496'
  color: blue
  width: 2

Properties are the same with ellipse object, except that “points” property contains only one element, which defines the position of the star.

A check mark.

- type: check
  points: '72,531'
  color: blue
  width: 2

Properties are the same with star object, except that the shape is a check mark instead of a star.

A text string.

- type: text
  points: '454,539'
  text: hello
  link: 'https://www.dokuwiki.org/plugin:sketchcanvas:syntax'

The “text” property defines the string to draw. The color and size of the text can be modified with “color” and “width” properties.

The “link” property, if exists, creates a hyperlink to the specified URL. When the user clicks on this text, the browser jumps to the URL's page. A text object with a link is designated by a blue underline. ¹⁾

Currently, multiple lines are not allowed in a text object.

A polyline or curve with arbitrary number of vertices.

- type: path
  color: blue
  width: 3
  d: 'M35,52.75C35,52.75 44,29.75 52,29.75C60,29.75 61,40.75 58,55.75C55,70.75 51,90.75 46,95.75C41,100.75 50,64.75 53,63.75C56,62.75 81,60.75 86,60.75C91,60.75 99,27.75 94,27.75C89,27.75 86,46.75 83,57.75C80,68.75 76,95.75 80,95.75C84,95.75 99,77.75 104,77.75C109,77.75 123,76.75 128,76.75C133,76.75 137,79.75 133,72.75C129,65.75 126,58.75 117,59.75C108,60.75 105,69.75 105,75.75C105,81.75 110,97.75 118,94.75C126,91.75 143,90.75 147,88.75C151,86.75 159,55.75 159,48.75C159,41.75 158,26.75 155,25.75C152,24.75 146,55.75 147,64.75C148,73.75 152,92.75 156,93.75C160,94.75 174,92.75 177,88.75C180,84.75 188,63.75 188,56.75C188,49.75 187,20.75 184,20.75C181,20.75 177,47.75 177,52.75C177,57.75 180,93.75 184,93.75C188,93.75 224,55.75 216,57.75C208,59.75 203,68.75 201,78.75C199,88.75 208,94.75 216,94.75C224,94.75 233,83.75 233,77.75C233,71.75 219,55.75 219,55.75'
  arrow: [head, tail]

Path object is very different from other object types.

A path object has the “d” property for list of points in the path, but its format is different from “points” property of other shapes. It's a subset of SVG's path element's format.

A path can contain cubic Bezier spline curves, which enables flexible curve layout.

The “arrow” property specifies which one or both ends of the path have arrowheads. This is very different from line objects or arc objects who has arrowhead presense in their type name.