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 NameDescription
background / bgSets the background color of the widget, Default Is platform specific.
borderwidth / bdSets widgets border. The default is system specific but usually 1 to 2 pixels.
cursorThe cursor to display when the mouse moves over the widget. By default, the standard cursor is used.
highlightbackgroundThe color used for the highlight border when there is no focus on the canvas. The default is system specific.
highlightcolorThe color used for the highlight border when the canvas is focused. The default is system specific.
takefocusIf true, the user can navigate to this widget using the Tab key. The default value is 0.
heightSets the height of the widget.
widthSets the width of the widget.
selectbackgroundSets the selection background color.
selectforegroundSets the selection foreground color.