First, let's tweak the appearance of our app. This isn't exactly a critical functionality, but bear with me here, as these customizations are commonly requested and also pretty easy to set up. I'll briefly describe the properties that we covered in the previous chapter, and we'll add a number of new tweaks, such as window size and change of the mouse cursor.

from kivy.core.window import Window
from kivy.utils import get_color_from_hex

Window.clearcolor = get_color_from_hex('#FFFFFF')

To illustrate one possible scenario for reacting to the touch input, let's draw a circle every time the user touches (or clicks) the screen.

A Widget has an on_touch_down event that will come in handy for this task. We're interested in just the coordinates of every touch for the time being, and they are accessible as follows:

class CanvasWidget(Widget):
    def on_touch_down(self, touch):
        print(touch.x, touch.y)

This example prints the position of touches as they occur. To draw something on the screen instead, we will use the Widget.canvas property. Kivy's Canvas is a logical drawable surface that abstracts away the underlying OpenGL renderer. Unlike the low-level graphical API, the canvas is stateful and preserves the drawing instructions that were added to it.

Speaking of drawing primitives, many of those can be imported from the kivy.graphics package. Examples of drawing instructions are Color, Line, Rectangle, and Bezier, among others.

Right now, the only way to clear the screen in our little app is to restart it. Let's add a button for deleting everything from the canvas to our UI, which is very minimalistic at the moment. We'll reuse the button look from the previous app, so there will be nothing new about theming; the interesting part here is positioning.

In our first program, the Clock app from Chapter 1, Building a Clock App, we didn't work on any explicit positioning at all, as everything was being held in place by nested BoxLayouts. Now, however, we don't have any layout to our program as the root widget is our very own CanvasWidget, and we didn't implement any logic to position its children.

In Kivy, the absence of an explicit layout means that every widget has full control over its placement and size (this is pretty much the default state of affairs in many other UI toolkits, such as Delphi, Visual Basic, and so on).

To position the newly created delete button in the...

Our app already has a clear screen function but still draws just circles. Let's change it so that we can draw lines instead.

To follow continuous touch events (click-and-drag), we'll need to add a new event listener, on_touch_move. Every time the callback is invoked, it receives the latest point where the event occurred.

If we only had a single line going at every moment (like typically done on a desktop, since there is only one mouse pointer anyway), we could save the line we're currently drawing in self.current_line. But since we're aiming at multitouch support from the very beginning, we'll take another approach and store every line being drawn in the corresponding touch variable itself.

This works because for every continuous touch from start to end, all callbacks receive the same touch object. There is also a touch.ud property of the type dict (where ud is short for user data), which is specifically tailored to keep touch-specific attributes...

Every painting program comes with a palette to choose colors from, and ours will be no exception by the time we reach the end of this section, real soon.

Conceptually, a palette is just a list of available colors, presented in a way that makes choosing the right color easy. In a full-fledged image editor, it usually includes every color available on the system (commonly a full 24-bit true color or the 16,777,216 unique colors). The customary representation of this all-encompassing palette typically looks like the following:

Illustration of a true color palette window

On the other hand, if we aren't going to compete with popular proprietary image editing applications, we might as well ship a limited selection of colors. For a person with little to no background in graphics, this may even pose a competitive advantage—choosing fitting colors that look good together is hard. For this exact reason, there are palettes on the Internet that may be universally used for...

The last and easiest feature that we are going to implement is a simple line thickness selector. As you can see in the following screenshot, we're reusing assets and styles from the previous part, the color palette.

Line width selector

This UI uses yet another RadioButton subclass, unimaginatively named LineWidthButton. Append the following declaration to the paint.kv file:

<LineWidthButton@ColorButton>:
    group: 'line_width'
    on_release: app.canvas_widget.set_line_width(self.text)
    color: C('#2C3E50')
    background_color: C('#ECF0F1')

Key differences from ColorButton are highlighted in the preceding code. These new buttons belong to another radio group and fire another event handler when interacted with. Other than this, they are very similar.

The layout is equally simple, built in the same fashion as that of the color palette, except that it's vertical:

BoxLayout:
    orientation: 'vertical'
    padding...