Today, we will look at canvas. You can operate with canvas in .py file using with self.canvas:; or in .kv file using canvas:.

What is canvas

Canvas is a place which contains some objects. For example:

• Rectangle
• RoundedRectangle
• Color
• Ellipse

We'll have look at them later.

We have 3 types of canvas:

• canvas.before
• canvas.after
• canvas

Canvas.before

Places the canvas and its objects behind other widgets such as buttons, labels...

It is useful when creating background.

Canvas.after

Places the canvas and its objects before other widgets.

You can use it for creating your own button design.

Canvas

Places the canvas and its objects in behind the widgets which will be created later, but before the widgets which have been created.

Canvas has four most important and most used objects:

Rectangle

Creates a rectangle. Commands:

• pos: - used in Float and Relative layouts, in pixels, in .kv you can use root.width and root.height (parameters of the screen)
• size: - width, height in pixels
• source: - an image (if it is in the same folder, you say "image.png", otherwise "/way/to/the/image", or you can use url of an image.

You can set color of Rectangle using Color obj.

RoundedRectangle

Similar to Rectangle.

• pos: - in pixels
• size: - width, height in pixels
• source: - source of an image
• radius: (a, b, c, d) - when you set only a, it rounds all corners, by setting other values, you can set how much is the corner rounded

Ellipse

Creates an ellipse.

• pos: - position of object in pixels
• size: - size of the object
• angle_start: - in angles, specifies the start of angle in an ellipse, default is set to 0
• angle_end:  - as angle_start, specifies end of the angle, default is 360

Color

Mostly used, it is for coloring other objects in the canvas. When you for example set the color red, and then create a Rectangle, it will be red.

You can ste the color using command:

• rgba: (1, 0, 0, 1) - red

Some examples of code:

Creating a green RoundedRectangle on black background:

.py:

import kivy
kivy.require("1.10.1") #You have to specify the minimal version of Kivy that should be used.
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class Screen(FloatLayout):
	pass


class MainApp(App):
	
	def build(self):
		return Screen()

MainApp().run()

.kv:

#:kivy 1.10.1

<Screen>:
    
    canvas.before:
    	Color:
    		rgba: (0, 0, 0, 1)
    	Rectangle:
    		size: root.width, root.top #sets width to width of the screen and height to the height of the screen
    		#position doesn't need to be specified sice the background fills the whole screen
    #now let's create a RoundedRectangle
    #first, we need to specify the color, we use canvas or canvas.after, because it has to appear before the background
    canvas:
    	Color:
    		rgba: (0, 1, 0, 1) #stands for green
    	RoundedRectangle:
    		size: 200, 600 #the width will be 200 px and the height will be 600 px
    		pos: 0, 0 #we place the RoundedRectangle in the left bottom corner of the screen
    		
    
    

Creating a blue Ellipse (a circle in this case) and a red Rectangle behind it:

.py (same as in the previous example):

import kivy
kivy.require("1.10.1") #You have to specify the minimal version of Kivy that should be used.
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class Screen(FloatLayout):
	pass


class MainApp(App):
	
	def build(self):
		return Screen()

MainApp().run()

.kv:

#:kivy 1.10.1

<Screen>:
    
    canvas.before:
    	Color:
    		rgba: (0, 0, 0, 1)
    	Rectangle:
    		size: root.width, root.top
    		#setting background as in the previous example
    		
    canvas:
    	Color:
    		rgba: (1, 0, 0, 1)
    	Rectangle:
    		size: 400, 400
    		pos: 0, 0
    	Color:
    		rgba: (0, 0, 1, 1)
    	Ellipse:
    		size: 400, 400
    		pos: 0, 0

As you might see, because we used canvas in this example, the placement of the objects depends on the order in the code.

Thanks for reading. And don't create crypto scams, it isn't good for the environment.

You can support my work there (TRC-20):

TRTrony1AmK3233VXTENcXSFem7sLRu2am

Or there (ERC-20):

0x026678e4c9586d207bd7e3907378cc28e8608a1c

Thanks for any support!