Chapter 2. Graphics – the Canvas

Any Kivy Widget contains a Canvas object. A Kivy Canvas is a set of drawing instructions that define the graphical representation of Widget.

Tip

Be careful with the name because it tends to be confusing! A Canvas object is not what we draw on (for example, as it is in HTML5); it is a set of instructions to draw in the coordinate space.

The coordinate space refers to the place in which we draw. All the Kivy widgets share the same coordinate space, and a Canvas instance, the instructions to draw on it. A coordinate space is not restricted to the size of the window or the application screen, which means that we can draw outside of the visible area.

We will discuss how to draw and manipulate the representation of the widgets through the instructions we add to the Canvas object. Here is a list of the most important skills that we will cover:

• Drawing basic geometric shapes (straight and curve lines, ellipses, and polygons) through vertex instructions
• Using colors, and rotating, translating, and scaling the coordinate space through the context instructions
• The difference between vertex and context instructions and how they complement each other
• The three different sets of instructions of Canvas that we can use to modify the order of execution of the graphics instructions
• Storing and retrieving the current coordinate space context through PushMatrix and PopMatrix

Using the Kivy canvas brings with it some technical challenges because Kivy integrates graphic processing with efficiency in mind. These challenges are not initially obvious, but there is nothing particularly difficult about them if we understand the underlying problem. This is why the next section is dedicated to introduce the main considerations that we face when we use the canvas.