Unit 12.2A · Term 2

PyGame Drawing Primitives

The pygame.draw module provides functions to draw shapes — rectangles, circles, lines, polygons — directly onto the game window surface.

Learning Objectives

12.5.2.1 Output graphic primitives to the application window

Lesson Presentation

12.2A-pygame-drawing.pdf · Slides for classroom use

View Download

Conceptual Anchor

The Geometry Toolkit Analogy

pygame.draw is like a geometry set: you have a ruler (line), set-square (rect), compass (circle), and protractor (arc). Each tool takes specific measurements and draws on your screen canvas.

Rules & Theory

Drawing Functions

Function	Parameters	Draws
`pygame.draw.rect()`	surface, color, (x, y, w, h), width	Rectangle
`pygame.draw.circle()`	surface, color, (cx, cy), radius, width	Circle
`pygame.draw.ellipse()`	surface, color, (x, y, w, h), width	Ellipse in bounding rect
`pygame.draw.line()`	surface, color, start, end, width	Straight line
`pygame.draw.lines()`	surface, color, closed, points, width	Connected line segments
`pygame.draw.polygon()`	surface, color, points, width	Polygon from vertices
`pygame.draw.arc()`	surface, color, rect, start, end, width	Arc (part of ellipse)

The width Parameter

width = 0 (default) → filled shape. width > 0 → outline only with that thickness. This applies to rect, circle, ellipse, and polygon.

Coordinate System

# PyGame coordinate system:
# (0,0) ──────────► x (increases right)
#   │
#   │
#   │
#   ▼
#   y (increases downward)
#
# rect = (x, y, width, height)
# x, y = top-left corner position

Worked Examples

1 Drawing All Shapes

import pygame, sys

pygame.init()
screen = pygame.display.set_mode((800, 600))
pygame.display.set_caption("Shape Gallery")
clock = pygame.time.Clock()

WHITE  = (255, 255, 255)
RED    = (255, 50, 50)
GREEN  = (50, 200, 50)
BLUE   = (50, 100, 255)
YELLOW = (255, 255, 0)

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    screen.fill((30, 30, 30))

    # Filled rectangle
    pygame.draw.rect(screen, RED, (50, 50, 150, 100))

    # Outline rectangle
    pygame.draw.rect(screen, RED, (50, 200, 150, 100), 3)

    # Filled circle
    pygame.draw.circle(screen, GREEN, (350, 100), 60)

    # Line
    pygame.draw.line(screen, YELLOW, (500, 50), (750, 200), 4)

    # Polygon (triangle)
    pygame.draw.polygon(screen, BLUE,
                        [(600, 300), (700, 450), (500, 450)])

    # Ellipse
    pygame.draw.ellipse(screen, WHITE, (250, 350, 200, 100), 2)

    pygame.display.flip()
    clock.tick(60)

pygame.quit()
sys.exit()

2 Drawing a Simple Scene

import pygame, sys

pygame.init()
screen = pygame.display.set_mode((800, 500))
pygame.display.set_caption("Simple Scene")
clock = pygame.time.Clock()

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Sky
    screen.fill((135, 206, 235))

    # Sun
    pygame.draw.circle(screen, (255, 255, 0), (700, 80), 50)

    # Ground
    pygame.draw.rect(screen, (34, 139, 34), (0, 380, 800, 120))

    # House body
    pygame.draw.rect(screen, (210, 180, 140), (250, 250, 200, 130))

    # Roof (triangle)
    pygame.draw.polygon(screen, (139, 69, 19),
                        [(240, 250), (350, 170), (460, 250)])

    # Door
    pygame.draw.rect(screen, (101, 67, 33), (325, 310, 50, 70))

    # Window
    pygame.draw.rect(screen, (173, 216, 230), (280, 280, 40, 40))
    pygame.draw.line(screen, (0,0,0), (300, 280), (300, 320), 2)
    pygame.draw.line(screen, (0,0,0), (280, 300), (320, 300), 2)

    pygame.display.flip()
    clock.tick(60)

pygame.quit()
sys.exit()

Common Pitfalls

Draw ORDER Matters

Shapes drawn later appear ON TOP of earlier shapes (like stacking paper). Draw the background first, then objects.

Tasks

Apply

Draw a traffic light using rectangles and circles.

Apply

Draw a chessboard (8×8 grid of alternating black and white squares).

Create

Design a night sky scene with a moon (circle), stars (small circles), and a city skyline (rectangles).

Self-Check Quiz

Q1: How do you draw a filled circle at position (400, 300) with radius 50?

pygame.draw.circle(screen, color, (400, 300), 50) — width defaults to 0 (filled).

Q2: What does width=3 do in pygame.draw.rect()?

Draws only the outline of the rectangle with a 3-pixel thick border (not filled).

Q3: Where is (0, 0) in PyGame's coordinate system?

Top-left corner of the window. X increases to the right, Y increases downward.