Structuring graphic instructions

Apart from the canvas instance, a Widget includes two other canvas instances: canvas.before and canvas.after.

Note

The Widget class has three sets of instructions (canvas.before, canvas, and canvas.after) to organize the order of execution. With them, we can control which elements will go to the background or stay on the foreground.

The following drawing.kv file shows an example of these three sets (lines 92, 98, and 104) of instructions:

90. # File name: drawing.kv (Before and After Canvas)
91. <DrawingSpace>:
92.    canvas.before:
93.        Color: 
94.            rgba: 1,0,0,1
95.        Rectangle:
96.            pos: 0,0
97.            size: 100,100
98.    canvas:
99.        Color: 
100.         rgba: 0,1,0,1
101.     Rectangle:
102.         pos: 100,0
103.         size: 100,100
104.  canvas.after:
105.      Color: 
106.          rgba: 0,0,1,1
107.      Rectangle:
108.          pos: 200,0
109.          size: 100,100
110.  Button:
111.      text: 'A very very very long button'
112.      pos_hint: {'center_x': .5, 'center_y': .5}
113.      size_hint: .9,.1

In each set, a rectangle of different color is drawn (lines 95, 101, and 107). Here is a diagram that illustrates the execution order of the canvases. The numbers on the top-left margin of each code block indicates the order of execution:

Execution order of the canvas

Notice that we didn't define any canvas, canvas.before, or canvas.after for Button but Kivy does internally. Since Button displays graphics on the screen (for example, it contains Rectangle associated with the background_color property), then it has instructions in its canvas sets. The final result is shown in the following screenshot (executed with: python drawing.py --size=300x100):

Before and after canvas

The graphics of Button (the child) are covered up by the set of instructions in canvas.after. It is clear that the instructions of canvas.before and canvas are executed before the displaying Button, but what is executed between them? It is necessary when we work with inheritance, and we want to add instructions in the subclass that should be executed before the canvas set of instructions of the base class. Also, it is a convenience when we mix Python code and Kivy language rules. We will study some practical examples in the last section of this chapter related to the Comic Creator, and review the topic in Chapter 4, Improving the User Experience.

For now, it is good enough to understand that we have three sets of instructions (Canvas) that provide some flexibility when we display graphics on the screen. Let's now explore some more context instructions related to transformations of the vertex instruction.