GUI Canvas

CS 65: Introduction to Computer Science I

tkinter's Canvas widget

The Canvas widget provides drawing and animation capabilities

import tkinter

class CanvasDemo:
    
    def __init__(self):
        #create the Tk object - the window
        self.main_window = tkinter.Tk()
        self.main_window.title('Canvas Demo') # Set a title


        #create and pack the canvas object
        self.canvas = tkinter.Canvas(self.main_window, bg='white',width=600, height=600)
        self.canvas.pack()

        #draw some shapes on the canvas
        #the four coordinates go x1, y1, x2, y2
        rect1 = self.canvas.create_rectangle(200,300,250,500)
        rect2 = self.canvas.create_rectangle(50, 50, 150, 150,fill='blue')
        line = self.canvas.create_line(50,50,200,200)
        oval = self.canvas.create_oval(200,50,225,75,fill='red')

        tkinter.mainloop()

demogui = CanvasDemo()

Exercise

Make a green ball appear inside rect1

Search the Internet to find how to write text on the Canvas

A Drawing Example

import tkinter


class DrawingGUI:


    def __init__(self):
        
        #create the main window
        self.main_window = tkinter.Tk()

        #create a 300x300 canvas
        self.canvas = tkinter.Canvas(self.main_window,width=300,height=300)
        self.canvas.pack()

        #bind the draw callback function to the
        #mouse event "holding down button 1 while moving the mouse"
        self.main_window.bind("<B1-Motion>", self.draw)

        tkinter.mainloop()
    

    #callback function that runs when the mouse moves
    def draw(self,event):
        self.canvas.create_rectangle(event.x,event.y,event.x,event.y,fill='black')


drawing_gui_object = DrawingGUI()

Animation Example

import tkinter


class BallDrop:
    def __init__(self):

        #create the window
        self.main_window = tkinter.Tk()
        self.main_window.title('Ball Drop') # Set a title

        #create and pack the canvas
        self.canvas = tkinter.Canvas(self.main_window, bg='white', width=600, height=600)
        self.canvas.pack()

        #draw a ball
        self.ball = self.canvas.create_oval(200,50,225,75,fill='red')

        #being the animation by calling the animate function defined below
        self.animate()

        tkinter.mainloop()


    #performs the animation by moving the ball
    def animate(self):

        #move an object on the canvas, in this case
        #move the ball 0 in the horizontal direction
        #and 3 in the vertical direction
        self.canvas.move(self.ball, 0, 3)

        #call the animate function again in 20 ms
        self.main_window.after(20,self.animate)



animation = BallDrop()

Making the ball bounce

#demonstration of animating a bouncing ball
import tkinter


class BallBounce:
    def __init__(self):
        #create the window
        self.main_window = tkinter.Tk()
        self.main_window.title('Ball Bounce') # Set a title

        #create and pack the canvas
        self.canvas = tkinter.Canvas(self.main_window, bg='white', width=600, height=600)
        self.canvas.pack()

        #data attributes for keeping track of where the ball is
        #and which direction it's going
        self.going_down = True
        self.top_of_ball = 50
        self.bottom_of_ball = 75

        #draw a ball
        self.ball = self.canvas.create_oval(200,self.top_of_ball,225,self.bottom_of_ball,fill='red')

        # being the animation by calling the animate function defined below
        self.animate()

        tkinter.mainloop()

    # performs the animation by moving the ball
    def animate(self):

        #move the ball down if it is going down
        if self.going_down:
            self.bottom_of_ball += 3 #updating to keep track of
            self.top_of_ball += 3    #where the ball is
            self.canvas.move(self.ball, 0, 3)
        else: #move the ball up
            self.bottom_of_ball -= 3 #updating to keep track of
            self.top_of_ball -= 3    #where the ball is
            self.canvas.move(self.ball, 0, -3)

        #since we kept track of where it is, we can
        if self.bottom_of_ball >= 600:
            self.going_down = False

        self.main_window.after(20,self.animate)



animation = BallBounce()

Exercise

Make the ball bounce off the top of the window too.