{"id":4595,"date":"2022-09-08T01:45:14","date_gmt":"2022-09-08T01:45:14","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=4595"},"modified":"2022-09-08T01:47:46","modified_gmt":"2022-09-08T01:47:46","slug":"tkinter-canvas","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-canvas\/","title":{"rendered":"Tkinter Canvas"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn about the Tkinter Canvas widget and how to draw various objects on it.<\/p>\n\n\n\n

Introduction to the Tkinter canvas widget #<\/a><\/h2>\n\n\n\n

The canvas widget is the most flexible widget in Tkinter. The Canvas widget allows you to build anything from custom widgets to complete user interfaces. <\/p>\n\n\n\n

The canvas widget is a blank area on which you can draw figures, create text, and place images. <\/p>\n\n\n\n

To create a canvas widget, you create a new instance of the Canvas<\/code> class from the tkinter<\/code> module. For example, the following creates a canvas on a window:<\/p>\n\n\n

import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\nroot.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
How it works.<\/p>\n\n\n\n
First, create a new Canvas<\/code> object with the width 600px<\/code>, height 400px<\/code> and background white<\/code>:<\/p>\n\n\n
canvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
canvas.pack(anchor=tk.CENTER, expand=True<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
A canvas has a coordinate system like a window. The origin (0,0)<\/code> is at the top-left corner. The direction of the x-axis is from left to right and the direction of the y-axis is from top to bottom.<\/p>\n\n\n\n
Adding items to a canvas using create_* methods #<\/a><\/h2>\n\n\n\n
A canvas object has a number of add_*<\/code> methods. These methods allow you to place items on it. The items are:<\/p>\n\n\n\n
Item<\/th>Method<\/th><\/tr><\/thead>
Line<\/td>create_line()<\/td><\/tr>
Rectangle<\/td>create_rectangle()<\/td><\/tr>
Oval<\/td>create_oval()<\/td><\/tr>
Arc<\/td>create_arc()<\/td><\/tr>
Polygon<\/td>create_polygon()<\/td><\/tr>
Text<\/td>create_text(()<\/td><\/tr>
Image<\/td>create_image()<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Creating a line #<\/a><\/h3>\n\n\n\n
To create a line, you use the create_line()<\/code> method. For example, the following creates a red line:<\/p>\n\n\n
canvas.create_line((50<\/span>, 50<\/span>), (100<\/span>, 100<\/span>), width=4<\/span>, fill='red'<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In this example, a line consists of two points (50,50)<\/code> and (100,100)<\/code>. The create_line()<\/code> method connects the dots between these points.<\/p>\n\n\n\n
The width<\/code> argument specifies the width of the line. And the fill<\/code> argument specifies the color of the line.<\/p>\n\n\n\n
Creating a rectangle #<\/a><\/h3>\n\n\n\n
To draw a rectangle, you use the create_rectangle()<\/code> method. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Rectangle'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\ncanvas.create_rectangle((100<\/span>, 100<\/span>), (300<\/span>, 300<\/span>), fill='green'<\/span>)\r\n\r\nroot.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Creating an oval #<\/a><\/h3>\n\n\n\n
To draw an oval, you use the create_oval()<\/code> method. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Oval'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\n\rpoints = (\r\n    (50<\/span>, 150<\/span>),\r\n    (200<\/span>, 350<\/span>),\r\n)\r\ncanvas.create_oval(*points, fill='purple'<\/span>)\r\n\r\nroot.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Like a rectangle, an oval takes the coordinate of the upper-left and lower-right corners of its bounding box<\/em>. A bounding box of an oval is the smallest rectangle that contains the oval.<\/p>\n\n\n\n
In this example, the upper-left and lower-right corners of the bounding box are (50,150)<\/code> and (200,350)<\/code>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Creating a polygon #<\/a><\/h3>\n\n\n\n
To draw a polygon, you use the create_polygon()<\/code> method. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Polygon'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\n\r\n# create a polygon<\/span>\r\npoints = (\r\n    (100<\/span>, 300<\/span>),\r\n    (200<\/span>, 200<\/span>),\r\n    (300<\/span>, 300<\/span>),\r\n)\r\ncanvas.create_polygon(*points, fill='blue'<\/span>)\r\n\r\nroot.mainloop()\r\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Creating a text #<\/a><\/h3>\n\n\n\n
To place a text on a canvas, you use the create_text()<\/code> method. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Text'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\n\r\ncanvas.create_text(\r\n    (300<\/span>, 100<\/span>),\r\n    text=\"Canvas Demo\"<\/span>,\r\n    fill=\"orange\"<\/span>,\r\n    font='tkDefaeultFont 24'<\/span>\r\n)\r\n\r\nroot.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Create an arc #<\/a><\/h3>\n\n\n\n
To draw an arc on a canvas, you use the create_arc()<\/code> method. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\nfrom<\/span> turtle import<\/span> width\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Arc'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=600<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\ncanvas.create_arc((10<\/span>, 10<\/span>), (200<\/span>, 200<\/span>), style=tk.PIESLICE, width=2<\/span>)\r\ncanvas.create_arc((10<\/span>, 200<\/span>), (200<\/span>, 390<\/span>), style=tk.CHORD, width=2<\/span>)\r\ncanvas.create_arc((10<\/span>, 400<\/span>), (200<\/span>, 590<\/span>), style=tk.ARC, width=2<\/span>)\r\n\r\n\r\nroot.mainloop()\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Create an image #<\/a><\/h3>\n\n\n\n
To place an image on a canvas, you use the create_image()<\/code> method. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Image'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\npython_image = tk.PhotoImage(file='python.gif'<\/span>)\r\ncanvas.create_image(\r\n    (100<\/span>, 100<\/span>),\r\n    image=python_image\r\n)\r\n\r\n\rroot.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Note that if you pass directly the PhotoImage<\/a><\/code> to the create_image()<\/code> method, the image won’t display because it is automatically garbage collected<\/a>.<\/p>\n\n\n\n
The following code won’t work:<\/p>\n\n\n
canvas.create_image(\r\n    (100<\/span>, 100<\/span>),\r\n    image=tk.PhotoImage(file='python.gif'<\/span>)\r\n)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Binding an event to the item #<\/a><\/h2>\n\n\n\n
All the create_*<\/code> method returns a string value that identifies the item in the context of the Canvas<\/code> object. And you can use this value to bind an event to the item. <\/p>\n\n\n\n
To bind an event to an item, you use the tag_bind()<\/code> method of the Canvas<\/code> object. For example:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\r\n\r\nroot = tk.Tk()\r\nroot.geometry('800x600'<\/span>)\r\nroot.title('Canvas Demo - Binding Event'<\/span>)\r\n\r\ncanvas = tk.Canvas(root, width=600<\/span>, height=400<\/span>, bg='white'<\/span>)\r\ncanvas.pack(anchor=tk.CENTER, expand=True<\/span>)\r\n\r\npython_image = tk.PhotoImage(file='python.gif'<\/span>)\r\nimage_item = canvas.create_image(\r\n    (100<\/span>, 100<\/span>),\r\n    image=python_image\r\n)\r\ncanvas.tag_bind(\r\n    image_item,\r\n    '<Button-1>'<\/span>,\r\n    lambda<\/span> e: canvas.delete(image_item)\r\n)\r\n\r\nroot.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
  • A canvas is a blank area where you can draw items such as lines, rectangles, ovals, arcs, texts, and images.<\/li>
  • Use Canvas()<\/code> to create a new canvas object.<\/li>
  • Use tag_bind()<\/code> method to bind an event to an item on a canvas.<\/li><\/ul>\n
    \n\t
    \n\t\t
    Was this tutorial helpful ?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
In this example, we bind the left-mouse click to the image item. If you click the image, the lambda<\/a> will execute that removes the image from the canvas.<\/p>\n\n\n\n
Second, place the canvas<\/code> object on the root<\/code> window using the pack()<\/a><\/code> geometry.<\/p>\n\n\n