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...