Shapes

The most elementary thing that you draw on the canvas is called a Shape. The shape could be a line, a rectangle, a circle, or even text.

Drawing a Shape

To draw any shape on the canvas, declare and draw it using the shape statement. Declaration of a shape involves

• specifying the type of the shape
• specifying the properties of the shape
• ending the declaration using endshape

shape <name of shape>(<type>):
  .<property1> = value1
  .<property2> = value2
  .<property3> = value3
endshape

There are a lot of built-in shapes like text, line, and circle that you can use for your animation and artwork. You can find all the supported shapes in the menu on the left-hand side.

Every shape type has a set of properties, like color, name, position, that it requires during declaration. These properties determine how the shape will be rendered on the canvas. Some properties are common across shapes, but every shape will have a few properties unique to it.

You will find information about the properties supported by a shape in the documentation of that shape.

Once you have specified the properties, you must specify the end of your shape declaration by putting in an endshape.

Example

To draw some text on the canvas, we use the shape text and declare it as

shape greeting(text):
  .text = "Hello"
  .color = RED
  .position = (100, 100)
endshape

The above set of statements declare and draw a shape named greeting of type text at position (100, 100) in color RED.

You can find more details and supported properties by the text shape here; and similar to this, you can find other shapes and their supported properties through their corresponding documentation.