Display Kivy canvas inside GridLayout

Question

I am trying to reference to Canvas within GridLayout with just drawing simple rectangle before further development. Code:

main.py:

import kivy
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.graphics.vertex_instructions import Rectangle
from kivy.graphics.context_instructions import Color

class Grafika(Widget):
    def __init__(self, **kwargs):
        super(Grafika,self).__init__(**kwargs)
        with self.canvas:
            Color(1, 0, 0, 1)
            Rectangle(pos=self.pos,size=self.size)

kv=Builder.load_file("my.kv")

class MyMainApp(App):
    def build(self):
        return kv

if __name__ == "__main__":
    MyMainApp().run()

my.py

<TextInput>:
    font_size:20
    color: 0.3, 0.6,0.7,1
    size_hint: (0.3,0.5)
<Button>:
    font_size:20
    color: 0.3, 0.6,0.7,1
    size_hint: (0.3,0.3)


Grafika:
    GridLayout:
        cols:2
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size

After running i get error:

...
     27:            Button:
     28:                text:"calc"
>>   29:        canvas:
     30:            Color:
     31:                rbg:1, 1, 1, 1
...
Canvas instructions added in kv must be declared before child widgets.

I am new in kivy, so any help is appreciated.

After solving this issue, I am planning to run custom python func , run under button calc, and return calculated results on canvas. Func results are 2d line points, hence plotting of results on canvas is goal here.

Answer 1

Change:

Grafika:
    GridLayout:
        cols:2
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size

to:

Grafika:
    GridLayout:
        cols:2
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"

to put the canvas: instruction before the children.