Images, colors, and backgrounds

Exclusive offer: get 50% off this eBook here
Kivy: Interactive Applications in Python

Kivy: Interactive Applications in Python — Save 50%

Create cross-platform UI/UX applications and games in Python with this book and ebook

$20.99    $10.50
by Roberto Ulloa | October 2013 | Open Source

In this article by Roberto Ulloa, the author of Kivy: Interactive Applications in Python, we will learn how to add images and colors to shapes and how to position graphics at a front or back level . We continue using the same Python code of the first section: python --size=400x100.

(For more resources related to this topic, see here.)

The following screenshot (Images and colors) shows the final result of this article:


Images and colors

The following is the corresponding drawing.kv code:

64. # File name: drawing.kv (Images and colors) 65. <DrawingSpace>: 66. canvas: 67. Ellipse: 68. pos: 10,10 69. size: 80,80 70. source: 'kivy.png' 71. Rectangle: 72. pos: 110,10 73. size: 80,80 74. source: 'kivy.png' 75. Color: 76. rgba: 0,0,1,.75 77. Line: 78. points: 10,10,390,10 79. width: 10 80. cap: 'square' 81. Color: 82. rgba: 0,1,0,1 83. Rectangle: 84. pos: 210,10 85. size: 80,80 86. source: 'kivy.png' 87. Rectangle: 88. pos: 310,10 89. size: 80,80

This code starts with an Ellipse (line 67) and a Rectangle (line 71). We use the source property, which inserts an image to decorate the polygon. The image kivy.png is 80 x 80 pixels with a white background (without any alpha/transparency channel). The result is shown in the first two columns of the previous screenshot (Images and colors).

In line 75, we use the context instruction Color to change the color (with the rgba property: red, green, blue, and alpha) of the coordinate space context. This means that the next VertexInstructions will be drawn with the color changed by rgba. A ContextInstruction changes the current coordinate space context. In the previous screenshot, the blue bar at the bottom (line 77) has a transparent blue (line 76) instead of the default white (1,1,1,1) as seen in the previous examples. We set the ends shape of the line to a square with the cap property (line 80).

We change the color again in line 81. After that, we draw two more rectangles, one with the kivy.png image and other without it. In the previous screenshot (Images and color) you can see that the white part of the image has become as green as the basic Rectangle on the left. Be very careful with this. The Color instruction acts as a light that is illuminating the kivy.png image. This is why you can still see the Kivy logo on the background instead of it being all covered by the color.

There is another important detail to notice in the previous screenshot. There is a blue line that crosses the first two polygons in front and then crosses behind the last two. This illustrates the fact that the instructions are executed in order and this might bring some unwanted results. In this example we have full control of the order but for more complicated scenarios Kivy provides an alternative.

We can specify three Canvas instances (canvas.before, canvas, and canvas.after) for each Widget. They are useful to organize the order of execution to guarantee that the background component remains in the background, or to bring some of the elements to 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). The following diagram illustrates the execution order of the canvas. The number on the top-left margin of each code block indicates the order of execution:

Execution order of the canvas

Please note that we didn't define any canvas, canvas.before, or canvas.after for the Button, but Kivy does. The Button is a Widget and it displays graphics on the screen. For example, the gray background is just a Rectangle. That means that it has instructions in its internal Canvas instances. The following screenshot shows the result (executed with python --size=300x100):

Before and after canvas

The graphics of the Button (the child) are covered up by the graphics of instructions in the canvas.after. But what is executed between canvas.before and canvas? It could be code of a base class when we are working with inheritance and we want to add instructions in the subclass that should be executed before the base class Canvas instances. A practical example of this will be covered when we apply them in the last section of this article in the comic creator project. The canvas.before will also be useful when we study how to dynamically add instruction to Canvas instances

For now, it is sufficient to understand that there are three sets of instructions (Canvas instances) that provide some flexibility when we are displaying graphics on the screen. We will now explore some more context instructions related to three basic transformations.


In this article we learned how to add images and colors to shapes and how to position graphics at a front or back level.

Resources for Article:

Further resources on this subject:

Kivy: Interactive Applications in Python Create cross-platform UI/UX applications and games in Python with this book and ebook
Published: September 2013
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :

Roberto Ulloa

Roberto Ulloa has a diverse academic record in multiple disciplines within the field of Computer Science. He obtained an MSc from the University of Costa Rica and also taught programming and computer networking there. He then spent two years researching about cultural complexity at PhD level at the CulturePlex Lab of the University of Western Ontario.

He loves travelling and enjoys an itinerant life, living among different cultures and environments. He loves nature and has spent many months volunteering in Central and South America.

He currently lives in Kuala Lumpur, earning a living as a web developer in Python/Django and PHP/Wordpress. He constantly worries that the Internet has already become aware of itself and we are not able to communicate with it because of the improbability of it being able to speak Spanish or any of the 6,000 odd human languages that exist in this world.

To know more about Roberto, you can visit

Books From Packt

Practical Maya Programming with Python
Practical Maya Programming with Python

 Python Data Visualization Cookbook
Python Data Visualization Cookbook

 Spring Python 1.1
Spring Python 1.1

 MySQL for Python
MySQL for Python

 Python Geospatial Development - Second Edition
Python Geospatial Development - Second Edition

 Python 3 Object Oriented Programming
Python 3 Object Oriented Programming

 Learning Geospatial Analysis with Python
Learning Geospatial Analysis with Python

Python Multimedia
Python Multimedia

No votes yet

Post new comment

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software