What is Canvas Widget?
The Canvas widget can be used to draw any kind of graphical structure like Line, Circle, Polygon or any shapes, It provides structured graphics capabilities for Tkinter. It is a versatile widget that means it can be used to render graphs and plots or can be used to create custom widgets also. It is one of the most powerful widgets available in Tkinter.
Example
The following Python script creates a window containing a Canvas widget that draws a simple graph.
You need to write following code in any text editor and then save it with .py extension. To execute the application, Type python CanvasExample.py command in terminal.
from tkinter import * window = Tk() window.title("Studyfied.com") window.geometry('350x200') # Create a rectangular area canvas = Canvas(window, width=350, height=200) canvas.pack() # Draw some lines on it canvas.create_line(0, 80, 350, 80) # Draw a rectangle bar 1 canvas.create_rectangle(10, 50, 50, 200, fill="red") # Draw a rectangle bar 2 canvas.create_rectangle(60, 30, 100, 200, fill="orange") # Draw a rectangle bar 3 canvas.create_rectangle(110, 80, 150, 200, fill="blue") window.mainloop()
Output
The above code produces the following output in windows operating system.
Explanation
Following line creates a Tkinter window
from tkinter import * window = Tk() window.title("Studyfied.com") window.geometry('350x200')
See explanation of Tkinter window – Tkinter top level window
This snippet creates a canvas widget. The first parameter passed in the Canvas widget is the name of the parent window. Here it is “window”. And the next two parameters are width and height for canvas. You can provide other properties to customize the widget.
# Create a rectangular area canvas = Canvas(window, width=350, height=200) canvas.pack()
This line draws a straight line on canvas using create_line() method
canvas.create_line(0, 80, 350, 80)
This snippet draws three bars in three different colors using create_rectangle() method.
# Draw a rectangle shaped bar 1 canvas.create_rectangle(10, 50, 50, 200, fill="red") # Draw a rectangle shaped bar 2 canvas.create_rectangle(60, 30, 100, 200, fill="orange") # Draw a rectangle shaped bar 3 canvas.create_rectangle(110, 80, 150, 200, fill="blue")
Supported items
Canvas widget supports the following standard items:
Arc
An arc item can be a chord, a slice of a circle, or a simple arc.
coordinates = 10, 50, 240, 210 arc = canvas.create_arc(coordinates, start=0, extent=150, fill="red")
Image
An image item can be an instance of the BitmapImage class or PhotoImage class.
filename = PhotoImage(file = "pathToImage.jpeg") image = canvas.create_image(50, 50, anchor=NE, image=filename)
Line
Draws a line on the canvas.
line = canvas.create_line(x0, y0, x1, y1, ..., xn, yn, options)
Oval
Creates a circle or ellipse at the specified coordinates. Two pairs of coordinates are required. The upper left and lower right of the oval boundary rectangle.
oval = canvas.create_oval(x0, y0, x1, y1, options)
Polygon
Draws a polygon item that must have at least three vertices.
oval = canvas.create_polygon(x0, y0, x1, y1,...xn, yn, options)
Some canvas properties
Property Name | Description |
---|---|
background / bg | Sets the background color of the widget, Default Is platform specific. |
borderwidth / bd | Sets widgets border. The default is system specific but usually 1 to 2 pixels. |
cursor | The cursor to display when the mouse moves over the widget. By default, the standard cursor is used. |
highlightbackground | The color used for the highlight border when there is no focus on the canvas. The default is system specific. |
highlightcolor | The color used for the highlight border when the canvas is focused. The default is system specific. |
takefocus | If true, the user can navigate to this widget using the Tab key. The default value is 0. |
height | Sets the height of the widget. |
width | Sets the width of the widget. |
selectbackground | Sets the selection background color. |
selectforeground | Sets the selection foreground color. |