Python tkinter for GUI programs Canvas with items and options

Canvas can be used to create graphics by using Lines, rectangles , Arcs etc. It can be used to hold different types of widgets.

X - Horizontal coordinates
Y - Vertical coordinates

Basics of Python Tkinter

Tkinter canvas to add items like line, text , rectangle , oval, polygon, arc and Images with options

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=200,height=200)
my_c.pack()

my_w.mainloop()

We can create different type of shapes to place over a canvas.

create_text

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=350,height=150)
my_c.pack()

my_c.create_text(175,40,fill='#c0c0c0',font="Times 22  bold",text="Welcome to plus2net.com")
my_w.mainloop()

create_line

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=100,height=100)
my_c.pack()

x1=0
y1=50
x2=90
y2=50
my_c.create_line(x1,y1, x2,y2, fill="#ff00ff")

my_w.mainloop()

We can add width to our line

my_c.create_line(x1,y1, x2,y2, fill="#ff00ff",width=5)

create_rectangle

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=200,height=200)
my_c.pack()
my_c.create_rectangle(80,80,110,110,fill='#c0c0c0')

my_w.mainloop()

create_oval

We will draw one oval using create_oval

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=150,height=150)
my_c.pack()
my_c.create_oval(25,25,125,125,fill='#c0c0c0')

my_w.mainloop()

Create one Circle by using create_oval

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=200,height=200)
my_c.pack()

def my_circle(my_canvas,x,y,r):
    my_id=my_canvas.create_oval(x-r,y-r,x+r,y+r,fill='#c0c0c0')
    return my_id

my_circle(my_c,60,60,15)
#my_c.create_oval(60,60,130,130,fill='#c0c0c0')
my_w.mainloop()

create_image

import tkinter as tk
my_w = tk.Toplevel()
from PIL import Image, ImageTk

my_c = tk.Canvas(my_w,width=200,height=200)
my_c.pack()
#image = Image.open("icon-dwn.png")
f_name = tk.PhotoImage(file='icon-dwn.png')
my_img = my_c.create_image(50, 50,  image=f_name)

my_w.mainloop()

create_arc

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=150,height=150)
my_c.pack()

#my_c.create_arc(10,10,130,130,start=15,extent=160,fill='#c0c0c0')
my_c.create_arc(10,10,140,140,start=15,extent=340,fill='#c0c0c0')
my_w.mainloop()

x1y1 and x2y2 of arc dimension in Canvas

create_polygon

import tkinter as tk
my_w = tk.Tk()

my_c = tk.Canvas(my_w,width=150,height=150)
my_c.pack()

my_c.create_polygon(5,40,15,120,130,70,35,5,fill='#c0c0c0')
my_w.mainloop()

Options

`fill`	Colour used to fill the shape
`width`	Line width of the item ( or its outline)
`outline`	Colour of the outline ( rectangle , Oval etc. )
`dash`	Draw dashed line instead of solid Line width of the item ( or its outline). alternates short and long pixels. ( 2,5,210)
`outline`	Colour of the outline ( rectangle , Oval etc. )
`stipple`	pattern fill instead of solid fill colour. gray75,gray50 etc..
`state`	normal, disabled or hidden . Default value is normal
`activefill`	Colour when active ( mouse pointer is over the item )
`activeoutline`	Colour of the outline when active ( Mouse is over the item )
`activedash`	Same as dash ( above ) when active ( Mouse is over it )
`activewidth`	Same as width ( above ) when active ( Mouse is over it )
`disableddash`	When the item is disabled ( state=disabled)
`disabledfill`
`disabledoutline`
`disabledoutlinestipple`
`disabledstipple`
`disabledwidth`
`relief`	Values are flat, groove, raised, ridge, solid, or sunken Check the example below how canvas is used as a vertical button.

All options of Canvas can be displayed.

print(canvas.config().keys())

Listing all options and values.

for options in canvas.config():
    print(options + ": " + str(canvas[options]))

import tkinter as tk
my_w = tk.Tk()
width,height=410,410 # set the variables 
d=str(width)+"x"+str(height+40)
my_w.geometry(d) 
c1 = tk.Canvas(my_w, width=width-10, height=height-10,bg='lightgreen')
c1.grid(row=1,column=0,padx=5,pady=10)
c1.create_text(290,50,fill='#c0c0c0',font='Time 16 bold',text='welcome to plus2net')
my_rect=c1.create_rectangle(60, 20, 180, 80)
c1.create_oval(180, 90, 390, 200,fill='gray',dash=(25,5,1,10),activedash=(50,10),stipple='gray75',width=5,activestipple='gray25')
c1.create_line(10, 10, 50, 50,width=1,arrow='last')
c1.create_arc(50, 85, 180, 240, start=45, extent=135, fill="red")
c1.create_polygon(35,160, 70, 390, 180, 310,260, 350, 200, 250, fill='yellow')
f_name=tk.PhotoImage(file='D:\\top2.png')
my_img=c1.create_image(315,375,image=f_name)
#c1.delete(my_rect)
my_w.mainloop()

Using canvas as Background image

Here the variable path_image holds the path of the directory storing the image ( bg2.png )

frame_m_left is the Frame we used. This frame can hold other widgets. Here by using sticky='nw' we are keeping the 0,0 position to top left edge of the image.

bg=tk.PhotoImage(file=path_image+'bg2.png')

c1 = tk.Canvas(frame_m_left,width=1000,height=500)
c1.grid(row=0,column=0,columnspan=4,rowspan=4,sticky='nw',padx=0)
c1.create_image(0,0,image=bg,anchor='nw')

Vertical text on Canvas to use as Button

By using Canvas option angle we can rotate text. Here the width and height of the canvas has to match with the length of the text string and line height ( linespace ) of the font used.

Tkinter canvas as button to display vertical or rotated text with mouse events to trigger function

On Mouse click and mouse release events we configure the relief option of the canvas. Here on Mouse click the function my_task() is triggered to perform some additional task along with configuring the relief option to 'sunken'.

#canvas.bind("<ButtonPress-1>",lambda x:x.widget.configure(relief='sunken'))
canvas.bind("<ButtonPress-1>",lambda x:my_task()) # Mouse button pressed 
canvas.bind("<ButtonRelease-1>",lambda x:x.widget.configure(relief='raised'))

The full code is here.

import tkinter as tk
import tkinter.font as tkfont
my_w = tk.Tk()
my_w.geometry("400x250") 
font = tkfont.nametofont("TkDefaultFont")
my_str="plus2net " # string over the button to display. 

height=font.measure(my_str) + 10 # used as canvas height
width=font.metrics()['linespace'] + 10 # as canvas width

canvas=tk.Canvas(my_w,height=height,width=width, 
   background="SystemButtonFace",borderwidth=2, relief='raised')
canvas.create_text((4,4),angle='90',anchor='ne',text=my_str,
   fill='SystemButtonText',font=font)
canvas.grid(row=0,column=0,padx=20,pady=20)

l1_str=tk.StringVar(value='Welcome') # message on click event of cavas
l1=tk.Label(my_w,textvariable=l1_str,font=('Times',20,'normal'))
l1.grid(row=0,column=1,padx=5,pady=20)

def my_task(): # to execute when mouse button is released. 
    canvas.configure(relief='sunken') 
    l1_str.set('Hi and welcome to plus2net')

#canvas.bind("<ButtonPress-1>",lambda x:x.widget.configure(relief='sunken'))
canvas.bind("<ButtonPress-1>",lambda x:my_task()) # Mouse button pressed 
canvas.bind("<ButtonRelease-1>",lambda x:x.widget.configure(relief='raised'))

my_w.mainloop()

Animation using Rectangles & Circles Moving element in Canvas
Sin & cos curves in Canvas Scale value in Canvas Arc and pointer

Python Tkinter Button Python- Tutorials

Subscribe to our YouTube Channel here

Python tkinter Canvas