Canvas

The canvas object provides an interface for drawing shapes, textures or type. The center of every canvas is the origin point (0, 0) where the x-axis values increase from left to right and the y-axis values increase upwards.

Rendering vector shapes on the canvas is a two-step process. First, we define the contour of the shape that we want to draw. This is done through a series of "move_to" and "line_to" calls to the canvas. Nothing will be drawn, until we make a final call to either the "stroke" or "fill". The former renders our path as a series of straight lines whereas the latter will produce a closed shape filled with color.

Figure 1: Drawing vector shapes

To output a texture on the canvas, we start with a call to "set_source_image". This function accepts an image object and a position in canvas coordinates. Again, nothing is drawn until we call "paint" which will render and reset the source image. Notice that textures are rendered at the center of the given position.

Figure 2: Drawing a texture (at the center of canvas)

Text is drawn on the canvas using the "write" function. Before actually using "write", we first need to create a new font object and apply it to the canvas using "set_font". The position of the text is defined using "move_to".

Figure 3: Writing text