CMU 15-110: Principles of Computing
Graphics in Tkinter

1. Getting Started
2. Create an Empty Canvas
3. Draw a Rectangle with create_rectangle(left, top, right, bottom)
4. Draw Multiple Rectangles
5. Draw Centered Rectangles
6. Draw Custom Colors
7. Draw Ovals, Polygons, Lines, Arcs, and Text

1. Getting Started
   For help getting IDLE working, watch this . If you need more help, or if you want to install another editor such as pyzo (which we recommend but do not require) or sublime (which we do not recommend for 110 -- too complicated for now) or eclipse (please don't!), please go to OH where the course staff and faculty are more than happy to assist.


2. Create an Empty Canvas
   from tkinter import * def draw(canvas, width, height): pass # replace with your drawing code! def runDrawing(width, height): root = Tk() canvas = Canvas(root, width=width, height=height) canvas.pack() draw(canvas, width, height) root.mainloop() print('bye!') runDrawing(400, 200)
   Result:
   

   ---



3. Draw a Rectangle with create_rectangle(left, top, right, bottom)
   
   # Note: in this and all future examples, we only show the draw function. # To run these examples, you need to include all the code from the # first example above, and *replace* the draw function as appropriate. # create_rectangle(left, top, right, bottom) draws a rectangle # starting at (left, top) up to but excluding (right, bottom) def draw(canvas, width, height): canvas.create_rectangle(0,0,150,150, fill='yellow')
   Result:
   

   ---



4. Draw Multiple Rectangles
   # The colors 'white', 'black', 'red', 'green', 'blue', # 'cyan', 'yellow', and 'magenta' will always be available. # Other names may work, depending on your local installation. def draw(canvas, width, height): canvas.create_rectangle( 0, 0, 150, 150, fill='yellow') canvas.create_rectangle(100, 50, 250, 100, fill='orange', width=5) canvas.create_rectangle( 50, 100, 150, 200, fill='green', outline='red', width=3) canvas.create_rectangle(125, 25, 175, 190, fill='magenta', width=0) canvas.create_rectangle( 50, 60, 300, 90, fill='', outline='blue')
   Result:
   

   ---



5. Draw Centered Rectangles
   def draw(canvas, width, height): # First, fill the entire canvas with a cyan (light blue) rectangle canvas.create_rectangle(0, 0, width, height, fill='cyan') # Approach #1: Add margin to top/left, subtract margin from bottom/right: margin = 20 canvas.create_rectangle(margin, margin, width-margin, height-margin, fill='darkGreen') # Approach #2: add/subtract from center (cx, cy) cx = width/2 cy = height/2 rectWidth = 100 rectHeight = 50 canvas.create_rectangle(cx - rectWidth/2, cy - rectHeight/2, cx + rectWidth/2, cy + rectHeight/2, fill='orange')
   Result:
   

   ---



6. Draw Custom Colors
   def rgbString(red, green, blue): return '#%02x%02x%02x' % (red, green, blue) def draw(canvas, width, height): pistachio = rgbString(147, 197, 114) maroon = rgbString(176, 48, 96) canvas.create_rectangle(0, 0, width/2, height/2, fill=pistachio) canvas.create_rectangle(width/2, height/2, width, height, fill=maroon)
   Result:
   

   ---



7. Draw Ovals, Polygons, Lines, Arcs, and Text
   def draw(canvas, width, height): canvas.create_oval(100, 50, 300, 150, fill='yellow') canvas.create_polygon(100,30,200,50,300,30,200,10, fill='green') canvas.create_line(100, 50, 300, 150, fill='red', width=5) canvas.create_text(200, 100, text='Amazing!', fill='magenta', font='Helvetica 26 bold underline') canvas.create_text(200, 100, text='Carpe Diem!', anchor=SW, fill='darkBlue', font='Times 28 bold italic') # Arcs are drawn inside oval bounds, from the start angle (in degrees) # and running counterclockwise for the extent angle (also in degrees). canvas.create_arc(10, 60, 90, 140, start=45, extent= 90, fill='yellow') canvas.create_arc(10, 60, 90, 140, start=45, extent=-90, fill='cyan') canvas.create_arc(10, 150, 200, 190, start= 0, extent=180, fill='orange')
   Result:
   

   ---