Simple Drawing App

This kivy tutorial will show you how to create a simple drawing application using something in kivy called a canvas.

Importing Modules

Before we can start drawing anything on the screen we need to import some things from kivy.graphics.

from kivy.app import App
from kivy.graphics import Rectangle
from kivy.graphics import Color
from kivy.uix.widget import Widget

Drawing Shapes

The first thing we will do is simply draw a rectangle to the screen to ensure everything is working. To do this we will create an init method in the class we used in the previous tutorial. In this method we will simply create a rectangle.

class Touch(Widget):
    def __init__(self, **kwargs):
        super(Touch, self).__init__(**kwargs)

        with self.canvas:
            self.rect = Rectangle(pos=(0,0), size=(50,50))

Now when we run the program we should see a small rectangle showing up in the corner of our window.

Changing Color

Whenever we want to change the color of something being drawn on the screen we need to redefine the drawing color of the canvas like so.

class Touch(Widget):
    def __init__(self, **kwargs):
        super(Touch, self).__init__(**kwargs)

        with self.canvas:
            Color(1,0,0,0.5, mode="rgba")
            self.rect = Rectangle(pos=(0,0), size=(50,50))

Now our rectangle will be red.

Example

Here is an example of drawing multiple shapes that are different colors.

class Touch(Widget):
    def __init__(self, **kwargs):
        super(Touch, self).__init__(**kwargs)

        with self.canvas:
            Color(1,0,0,0.5, mode="rgba")
            self.rect = Rectangle(pos=(0,0), size=(50,50))
            Color(1,1,0,0.5,mode="rgba")
            self.rect2 = Rectangle(pos=(200,300), size=(100,50))

This creates the following display.

Simple Drawing App

Now that we know how to draw shapes onto the screen we will create an app that makes a square follow our mouse or finger.

To do this we can simply modify the position of the rect that we define in the init method.

class Touch(Widget):
    def __init__(self, **kwargs):
        super(Touch, self).__init__(**kwargs)

        with self.canvas:
            Color(1,0,0,0.5, mode="rgba")
            self.rect = Rectangle(pos=(0,0), size=(50,50))

    def on_touch_down(self, touch):
        self.rect.pos = touch.pos

    def on_touch_move(self, touch):
        self.rect.pos = touch.pos

Now as we click down on the screen the rectangle should follow our mouse or finger.

Drawing Lines

The last thing I will touch on is how to draw lines.

The first thing we need to do is import Line from kivy.graphics.

from kivy.graphics import Line

Next we will simply define a line and give it some points in the init method.

class Touch(Widget):
    def __init__(self, **kwargs):
        super(Touch, self).__init__(**kwargs)

        with self.canvas:
            Line(points=(20,30,400,500,60,500))
            Color(1,0,0,0.5, mode="rgba")
            self.rect = Rectangle(pos=(0,0), size=(50,50))


    def on_touch_down(self, touch):
        self.rect.pos = touch.pos

    def on_touch_move(self, touch):
        self.rect.pos = touch.pos