Learning Kivy : Canvas

Hey everyone!

In my previous Kivy tutorial I talked about the Carousel widget and the AsyncImage class that one can use to display and load images respectively. Today I would be talking about the Graphics module of the Kivy framework!

1. Graphics (kivy.graphics)

From the Kivy documentation, the Graphics package assembles all low level functions to draw an object.The entire package is compatible with OpenGL ES 2.0 and has a lot of rendering optimizations.

There are basically two things that one would require to draw on a screen. They are namely:

  • Canvas
  • Instruction objects

Each widget in Kivy already have their Canvas by default. When you are creating a widget, you can create all the instructions needed for drawing. If self is your current widget, you can do:

from kivy.graphics import *
with self.canvas:
    # Add a red color
    Color(1., 0, 0)

    # Add a rectangle
    Rectangle(pos=(10, 10), size=(500, 500))

The instructions Color and Rectangle are automatically added to the canvas object, and will be used when the window drawing will happen.

2. Canvas (kivy.graphics.instructions)

The Canvas is a root object used for drawing by a Widget. The Canvas supports Python's with statement and it's enter and exit semantics.

Use of Canvas without the with statement

self.canvas.add(Color(1., 1., 0))
self.canvas.add(Rectangle(size=(50, 50)))

Usage of Canvas with Python's with statement

with self.canvas:
    Color(1., 1., 0)
    Rectangle(size=(50, 50))

Now, here's a small implementation of the Canvas object!

Open Python IDLE and create a new Python script. Give the name as canvas_demo.py

from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from kivy.app import App
from kivy.graphics import Color, Rectangle
from functools import partial

class CanvasApp(App):

    #function to add rectangle to screen
    def add_rects(self,wid,*largs):
        with wid.canvas:
                Color(1, 0, 0, .5, mode='rgba')
                wid.rect = Rectangle(pos=(200,200), size=(300,300))
                
    #function to clear rectangle from screen
    def reset_rects(self,wid,*largs):
        wid.canvas.clear()

    def build(self):
        wid = Widget()
         
        #calling function with default arguments
        btn_add = Button(text='Draw rectangle',on_press=partial(self.add_rects,wid,'Adding a rectangle'))
        btn_clear = Button(text='Clear',on_press=partial(self.reset_rects,wid,'Clear the canvas'))

        layout = GridLayout(cols=1,rows=2)
        layout.add_widget(btn_add)
        layout.add_widget(btn_clear)
        root=GridLayout()
        root.add_widget(wid)
        root.add_widget(layout)

        return root

if __name__ == '__main__':
    CanvasApp().run()

On running the above code, you should see a red color rectangle as soon as you click on the Draw Rectangle button. On pressing the Clear button the rectangle will disappear!

kivy_canvas_demo