Canvas Widget Of Tkinter Module

Table of Contents

The Canvas widget provides structured graphics facilities for Tkinter.
This is a highly versatile widget which can be used to draw graphs and plots, create graphics editors, and implement various kinds of custom widgets.
The Canvas is a rectangular area intended for drawing pictures or other complex layouts.
You can place graphics, text, widgets or frames on a Canvas.
To draw various graphics we can use create method.

Syntax

itv = Canvas(master,options=value,…)

Parameters:
master − This represents the parent window.
options − Here is the list of most commonly used options for this widget. These options can be used as key-value pairs separated by commas.
Various Options in Canvas

bd : Border width in pixels. Default is 2.
bg : Normal background color.
confine : If true (the default), the canvas cannot be scrolled outside of the scrollregion.
cursor : Cursor used in the canvas like arrow, circle, dot etc.
height : Size of the canvas in the Y dimension.
highlightcolor : Color shown in the focus highlight.
relief : Relief specifies the type of the border. Some of the values are SUNKEN, RAISED, GROOVE, and RIDGE.
scrollregion : A tuple (w, n, e, s) that defines over how large an area the canvas can be scrolled, where w is the left side, n the top, e the right side, and s the bottom.
width : Size of the canvas in the X dimension.
xscrollincrement : If you set this option to some positive dimension, the canvas can be positioned only on multiples of that distance, and the value will be used for scrolling by scrolling units, such as when the user clicks on the arrows at the ends of a scrollbar.
xscrollcommand : If the canvas is scrollable, this attribute should be the .set() method of the horizontal scrollbar.
yscrollincrement : Works like xscrollincrement, but governs vertical movement.
yscrollcommand : If the canvas is scrollable, this attribute should be the .set() method of the vertical scrollbar.

Canvas Items

The Canvas widget supports the following standard items:

arc (arc, chord, or pieslice)
bitmap (built-in or read from XBM file)
image (a BitmapImage or PhotoImage instance)
line
oval (a circle or an ellipse)
polygon
rectangle
text
window

To draw things in the canvas, use the create methods to add new items.

To display things on the canvas, you create one or more canvas items, which are placed in a stack. By default, new items are drawn on top of items already on the canvas.
Tkinter provides lots of methods allowing you to manipulate the items in various ways. Among other things, you can attach (bind) event callbacks to individual canvas items.
By scrolling the canvas, you can specify which part of the canvas coordinate system to show in the window.

How to draw canvas?

In the following you can see the code of our first simple script:

"""
Author : ITVoyagers (itvoyagers.in)

Date :17th March 2020

Description : Program to show use of canvas widget

"""
from tkinter import *
master = Tk()

canvas_width = 80
canvas_height = 40
w = Canvas(master, 
           width=canvas_width,
           height=canvas_height)
w.pack()

OUTPUT

How to draw line using canvas?

The method create_line(coords, options) is used to draw a straight line. The coordinates “coords” are given as four integer numbers: x1, y1, x2, y2 This means that the line goes from the point (x1, y1) to the point (x2, y2).

"""
Author : ITVoyagers (itvoyagers.in)

Date :17th March 2020

Description : Program to show use of canvas widget to draw a line

"""
from tkinter import *
master = Tk()

canvas_width = 80
canvas_height = 40
w = Canvas(master, 
           width=canvas_width,
           height=canvas_height)
w.pack()

y = int(canvas_height / 2)
w.create_line(0, y, canvas_width, y, fill="#476042")

OUTPUT

How to draw oval using canvas?

We can create an oval on a canvas c with the following method:

id = C.create_oval ( x0, y0, x1, y1, option, ... )

This method returns the object ID of the new oval object on the canvas C.

"""
Author : ITVoyagers (itvoyagers.in)

Date :17th March 2020

Description : Program to show use of canvas widget to draw oval

""" 
from tkinter import *

canvas_width = 190
canvas_height =150

master = Tk()

w = Canvas(master,width=canvas_width,height=canvas_height)
w.pack()

w.create_oval(50,50,150,100)

OUTPUT

How to draw rectangle using canvas?

For creating rectangles we have the method create_rectangle(coords, options). Coords is again defined by two points, but this time the first one is the top left point and the bottom right point of the rectangle.

"""
Author : ITVoyagers (itvoyagers.in)

Date :17th March 2020

Description : Program to show use of canvas widget to create reactangle

"""
from tkinter import *
master=Tk()
w=Canvas(master,width=200,height=100)
w.pack()
w.create_rectangle(50,20,150,75,fill='blue')

OUTPUT

How to draw polygon using canvas?

If you want to draw a polygon, you have to provide at least three coordinate points:
create_polygon(x0,y0, x1,y1, x2,y2, …)

In the following example we draw a triangle using this method:

"""
Author : ITVoyagers (itvoyagers.in)

Date :17th March 2020

Description : Program to show use of canvas widget to draw polygon

"""
#If you want to draw a polygon, you have to provide at least three coordinate points: 
#create_polygon(x0,y0, x1,y1, x2,y2, ...) 

from tkinter import *

canvas_width = 200
canvas_height =200
python_green = "#476042"

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

points = [0,0,canvas_width,canvas_height/2, 0, canvas_height]
w.create_polygon(points, outline=python_green, 
            fill='pink', width=3)

OUTPUT

How to use canvas image item?

To create an image item using canvas use create_image(x0,y0, options).

PhotoImage method is used to create an object to create a image.

"""
Author : ITVoyagers (itvoyagers.in)

Date :17th March 2020

Description : Program to show use of canvas widget with PhotoImage

"""
import tkinter as tk

root = tk.Tk()
logo = tk.PhotoImage(file="python.gif")

explanation = """At present, only GIF and PPM/PGM
formats are supported, but an interface 
exists to allow additional image file
formats to be added easily."""

w = tk.Label(root, 
             compound = tk.CENTER,
             text=explanation, 
             image=logo).pack(side="right")

root.mainloop()

OUTPUT

You can also check following posts to know more about tkinter and GUI

Canvas widget of tkinter module – Python