Canvas Widget in Kivy

Canvas Widget in Kivy

Canvas is the core object of a widget from which it draws. By default, every Widget in Kivy has a Canvas. When you make a widget, you can include all drawing instructions. The instructions Color and Rectangle are immediately appended to the canvas object when the window is drawn.

Note: Canva is not used for painting. With all of the talk surrounding HTML5 canvas, some people may assume that the canvas is the paint. Canvas, on the other hand, is essentially a container for instructions.

Using canvas

Let us see the approach to implementing Canvas Widget in Kivy.

Approach

• import kivy
• import kivy App
• import widget
• import Canvas, i.e.:
• from kivy.graphics import Rectangle, Color
• set minimum version(optional)
• Extend the Widget class
• Create the App Class
• Return a Widget
• Run an instance of the class

Implementation

Let us learn how to implement Canvas Widget in Kivy.

# importing Kivy module
import kivy
   
# Kivy version should be at least 1.9.1
kivy.require("1.9.1")

# Importing other classes
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle, Color
 
# The class where we will create canvas widget
class CanvasWidget(Widget):
     
    def __init__(self, **kwargs):
 
        super(CanvasWidget, self).__init__(**kwargs)
 
        # Decorating Canva
        with self.canvas:
            Color(.234, .456, .678, .8)  # setting the colour
 
            # Setting the size and position
            self.rect = Rectangle(pos = self.center, size =(self.width / 2., self.height / 2.))
            
            self.bind(pos = self.update_rect,
                  size = self.update_rect)
 
    # This function will be used to make canvas adjust according to screen size.
    def update_rect(self, *args):
        self.rect.pos = self.pos
        self.rect.size = self.size
 
# Create the App Class
class MyApp(App):
    def build(self):
        return CanvasWidget()
 
# run the App
MyApp().run()

You can also try this code with Online Python Compiler

Run Code

Output

In the canvas widget in Kivy, we may also use any other widget. We'll show you how to upload an image and adjust its color in the example below.

Simply change the color of the canvas widget in Kivy to modify the color of the image.

# importing kivy module
import kivy
   
# Kivy version should be atleast 1.9.1
kivy.require("1.9.1")

# Importing other classes
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle, Color
 
# The class where we will create canvas widget
class CanvasWidget(Widget):
     
    def __init__(self, **kwargs):
 
        super(CanvasWidget, self).__init__(**kwargs)
 
        with self.canvas:
           
            # Setting the color
            Color(1, 0, 0, 1)
 
            # Setting the size and position of image
            self.rect = Rectangle(source ='python.jpg',
                                  pos = self.pos, size = self.size)

            self.bind(pos = self.update_rect,
                  size = self.update_rect)
 
    # This function will be used to make canvas widget adjust according to screen size.
    def update_rect(self, *args):
        self.rect.pos = self.pos
        self.rect.size = self.size
 
# Create the App Class
class MyApp(App):
    def build(self):
        return CanvasWidget()
 
# run the App
MyApp().run()

You can also try this code with Online Python Compiler

Run Code

Output

Frequently Asked Questions

What do you know about Kivy?

Kivy is an open-source Python toolkit for quickly developing applications with novel user interfaces, like multi-touch apps. It is mostly used to create Android applications, but it may also be used to create desktop applications.

What are widgets in Kivy?

Widgets are a collection of different types of elements that we can combine to make an application.

What is a Canvas widget in Kivy?

Canvas is the core object of a widget from which it draws. By default, every Widget in Kivy has a Canvas. When you make a widget, you can include all drawing instructions.

What are the different Canvas widget options?

A canvas is a rectangular surface used to draw artwork or sophisticated arrangements. canvas.arc, create_bitmap, create_image, create line, create_window, and other methods for creating objects on canvases can be found in the following sections.

How to change widgets in Canvas?

Drag the pointer around the widgets on the canvas in Edit mode and release. You can also select a widget and then select more widgets with Ctrl + click.

Conclusion

In this article, we studied in detail canvas widgets in Kivy. We saw how to create and decorate a canvas widget and examples. We hope that this blog has helped you enhance your knowledge of the canvas widget. Do upvote our blog to help other ninjas grow.

After reading about the Canvas Widget in Kivy, are you not feeling excited to read/explore more articles on the topic of KIVY? Don't worry; Coding Ninjas has you covered. To learn, see the Introduction to Kivy, The drop-down List In Kivy, Widgets in Kivy, and Kivy Float Layout in Python.

Refer to our Guided Paths on Coding Ninjas Studio to upskill yourself in DSA, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But suppose you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!