ApiDemos™Python 3 – Tkinter Canvas
When it comes to creating graphical user interfaces (GUI) in Python, one of the most popular choices is Tkinter. Tkinter is a powerful and easy-to-use package that comes with Python standard libraries.
Tkinter allows developers to easily create buttons, menus, text boxes, and other widgets. However, Tkinter is not limited to these basic widgets. One of the most versatile and powerful widgets in Tkinter is the Canvas widget.
The Canvas widget is a powerful drawing area that lets developers create anything from simple graphics to complex interactive diagrams. The Canvas widget provides functions to draw images, text, lines, circles, and other shapes, and also supports mouse and keyboard events to make the drawing area interactive.
In this article, we will dive deeper into the Canvas widget and explore its various capabilities.
Creating a Simple Canvas
To create a Canvas widget in Tkinter, we use the Canvas class. The following code creates a new empty Canvas widget.
import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200)
canvas.pack()
root.mainloop()
In this code, we first import the tkinter module and create a new Tk object. We then create a new Canvas widget with a width of 200 pixels and a height of 200 pixels. Finally, we pack the canvas widget into the main window and start the event loop using mainloop.
By default, the Canvas widget appears as a blank area. We can start drawing on the Canvas by using various drawing functions provided by the widget.
Drawing Shapes
The Canvas widget provides a wide range of drawing functions to draw shapes such as lines, rectangles, circles, and polygons. All these functions return an ID for the created object, which can be used to manipulate or delete them later.
Drawing a Line
The create_line function is used to draw a straight line between two points. Its syntax is as follows:
canvas.create_line(x1, y1, x2, y2, options...)
where x1, y1 represent the starting point and x2, y2 represent the ending point of the line. The options argument can contain various parameters such as fill, width, and dash.
Here’s an example code that draws a simple line:
line = canvas.create_line(0, 0, 200, 200, fill="red", width=2)
This code draws a line starting at coordinates (0,0) and ending at coordinates (200,200) with a red color and a width of 2 pixels.
Drawing a Rectangle
The create_rectangle function is used to draw a rectangle with its top-left and bottom-right coordinates. Its syntax is as follows:
canvas.create_rectangle(x1, y1, x2, y2, options...)
Here’s an example code that draws a simple rectangle:
rect = canvas.create_rectangle(50, 50, 150, 100, fill="blue")
This code draws a rectangle starting at coordinates (50,50) and ending at coordinates (150,100) with a blue color.
Drawing an Oval
The create_oval function is used to draw an oval (ellipse) with its bounding box. Its syntax is as follows:
canvas.create_oval(x1, y1, x2, y2, options...)
Here’s an example code that draws a simple oval:
oval = canvas.create_oval(50, 50, 150, 100, fill="green")
This code draws an oval with a green color, inside a rectangle whose coordinates are (50,50) and (150,100).
Drawing a Polygon
The create_polygon function is used to draw a polygon with its vertices. Its syntax is as follows:
canvas.create_polygon(x1, y1, x2, y2, ..., xn, yn, options...)
Here’s an example code that draws a simple polygon:
poly = canvas.create_polygon(50, 50, 150, 50, 100, 100, fill="yellow")
This code draws a yellow colored polygon with vertices (50,50), (150,50), and (100,100).
Drawing a Text
The create_text function is used to draw text on the Canvas. Its syntax is as follows:
canvas.create_text(x, y, text="Hello, World!", options...)
Here’s an example code that draws a simple text:
text = canvas.create_text(100, 80, text="Hello, World!", fill="black")
This code draws the text “Hello, World!” at coordinates (100,80) with a black color.
Binding Events
The Canvas widget provides various event binding functions to enable interaction with the user via mouse or keyboard.
To bind an event to a widget, we use the bind function of the Canvas widget. The function takes two arguments – the event type to bind and the function to handle that event.
Mouse Events
The most commonly used mouse events are "<Button-1>" and "<Button-2>".“refers to the left mouse button, while“
Here’s an example code that binds the "<Button-1>" event to a function:
import tkinter as tk
def canvas_callback(event):
x, y = event.x, event.y
print("Clicked at", x, y)
root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200)
canvas.pack()
canvas.bind("<Button-1>", canvas_callback)
root.mainloop()
In this code, we create a new Canvas widget and bind the "<Button-1>" event to the canvas_callback function. The canvas_callback function gets the x and y coordinates of the mouse click event and prints them to the console.
Keyboard Events
The keyboard events are similar to mouse events. Here’s an example code that binds the "<Key>" event to a function:
import tkinter as tk
def canvas_callback(event):
key = event.keysym
print("Pressed", key)
root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200)
canvas.pack()
canvas.bind("<Key>", canvas_callback)
canvas.focus_set()
root.mainloop()
In this code, we create a new Canvas widget and bind the "<Key>" event to the canvas_callback function. The canvas_callback function gets the key pressed event and prints the key to the console.
Moving Objects
The Canvas widget also provides various functions to move the objects present on the Canvas.
The move method can be used to move an object by a certain amount. Its syntax is as follows:
canvas.move(id, x, y)
Here’s an example code that moves an oval shape:
import tkinter as tk
def move_oval():
canvas.move(oval, 5, 0)
canvas.after(10, move_oval)
root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200)
canvas.pack()
oval = canvas.create_oval(50, 50, 150, 100, fill="green")
move_oval()
root.mainloop()
In this code, we create a new Canvas widget and an oval shape. We then define a move_oval function that moves the oval shape by 5 pixels to the right every 10 milliseconds using the after method of the Canvas widget.
Conclusion
In this article, we learned how to create and use the Canvas widget in Tkinter. We explored various drawing functions to draw shapes and text on the Canvas, and also learned how to bind mouse and keyboard events to the widget.
We also discussed how to move the objects on the Canvas using the move method.
The Canvas widget is a powerful tool in Tkinter that can be used to create various interactive and graphical user interfaces. Start practicing and exploring the limitless possibilities with the Tkinter Canvas widget.