Python tkinter Canvas


Youtube Live session on Tkinter

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)
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_text on Canvas

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_line on Canvas

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_rectangle on Canvas

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_oval to draw oval on Canvas
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_oval to create Circle on Canvas

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()
create_arc to create arc Canvas
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()
create_polygon to create arc Canvas

create_bitmap

import tkinter as tk
my_w = tk.Tk()
my_c = tk.Canvas(my_w,width=200,height=150)
my_c.pack()
my_c.create_bitmap( 50,50,bitmap='question')
my_w.mainloop()
Adding bitmap to Canvas
More on Tkinter Bitmap

Options

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)
disabledfill
disabledoutline
disabledoutlinestipple
disabledstipple
disabledwidth
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.
print(canvas.config().keys())
Listing all options and values.
for options in canvas.config():
    print(options + ": " + str(canvas[options]))
All items in Canvas
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

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()
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 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


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    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-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer