Python tkinter Canvas

All items in Canvas
Canvas Size height width 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)
We can create different type of shapes to place over a canvas.


import tkinter as tk
my_w = tk.Tk()
my_c = tk.Canvas(my_w,width=350,height=150)
my_c.create_text(175,40,fill='#c0c0c0',font="Times 22  bold",text="Welcome to")my_w.mainloop()
create_text on Canvas


import tkinter as tk
my_w = tk.Tk()my_c = tk.Canvas(my_w,width=100,height=100)my_c.pack()x1=0y1=50x2=90y2=50my_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_line on Canvas


import tkinter as tk
my_w = tk.Tk()
my_c = tk.Canvas(my_w,width=200,height=200)
create_rectangle on Canvas


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)
create_oval to draw oval on Canvas
Create one Circle by using create_oval
import tkinter as tkmy_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
create_oval to create Circle on Canvas


import tkinter as tkmy_w = tk.Toplevel()from PIL import Image, ImageTkmy_c = tk.Canvas(my_w,width=200,height=200)my_c.pack()
#image ="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()


import tkinter as tk
my_w = tk.Tk()my_c = tk.Canvas(my_w,width=150,height=150)my_c.pack()
create_arc to create arc Canvas
x1y1 and x2y2 of arc dimension in Canvas


import tkinter as tkmy_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()
create_polygon to create arc Canvas


fillColour used to fill the shape
widthLine width of the item ( or its outline)
outlineColour of the outline ( rectangle , Oval etc. )
dashDraw dashed line instead of solid Line width of the item ( or its outline). alternates short and long pixels. ( 2,5,210)
outlineColour of the outline ( rectangle , Oval etc. )
stipplepattern fill instead of solid fill colour. gray75,gray50 etc..
statenormal, disabled or hidden . Default value is normal
activefillColour when active ( mouse pointer is over the item )
activeoutlineColour of the outline when active ( Mouse is over the item )
activedashSame as dash ( above ) when active ( Mouse is over it )
activewidthSame as width ( above ) when active ( Mouse is over it )
disableddashWhen the item is disabled ( state=disabled)
reliefValues 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.
Listing all options and values.
for options in canvas.config():    print(options + ": " + str(canvas[options]))
All items in Canvas
import tkinter as tkmy_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

Vertical canvas with text  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()
font = tkfont.nametofont("TkDefaultFont")
my_str="plus2net " # string over the button to display. 
height=font.measure(my_str) + 10 # used as canvas heightwidth=font.metrics()['linespace'] + 10 # as canvas widthcanvas=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)
l1_str=tk.StringVar(value='Welcome') # message on click event of cavasl1=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'))
Animation using Rectangles & Circles
Moving element in Canvas Moving widgets or Images on Canvas by using move()
Sin & cos curves in Canvas Scale value in Canvas Arc and pointer

Subscribe to our YouTube Channel here


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here

    Python Video Tutorials
    Python SQLite Video Tutorials
    Python MySQL Video Tutorials
    Python Tkinter Video Tutorials
    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2023 All rights reserved worldwide Privacy Policy Disclaimer