Translations of this page:

Step 003 - Surfaces and Drawing

screenshot screenshot
Screenshot of Screenshot of the improved variant

This program is blitting two different pygame surfaces into the pygame window (called screen):

  • The (white) background surface and
  • the (blue-black) ball surface

Unlike the usual Cartesian_coordinate_system, Pygame use an x,y coordinates system where the position (0,0) is defined as the top left corner of the screen. Moving down means having a higher y value, moving to the right means having a higher x value.

Cartesian Coordinate System. Source: Wikipedia vs. Pygame coordinate System
Cartesian coordinate system. The point (0,0) is in the middle Pygame coordinate system. The point (0,0) is in the top left corner

Code Discussion


Please note that despite the name the ball surface is a rectangular surface. Onto this surface the program draws a blue circle. Because the ball surface was not filled like the background surface, it remains black (Red Green Blue value: (0,0,0)). Also note that in this program nothing is blitted inside the mainloop, all painting and blitting occurs before the mainloop. The ball is visible on the screen because the background was blitted first and then the background the ball surface was blitted (quasi-on-top). Reverse the order of blitting and you should see only the white background. Blitting the background on the screen is a good method to clean all graphic artefacts from a screen.


Pygame knows a lot of drawing functions. In this code example, the function is used. All of Pygame's drawing function need a pygame surface to draw on. Think of those surfaces like papers or beer mats. The top left corner of the Pygame surface has the coordinate (0,0). Let's take a look at the pygame.draw_circle documentation and the code lines in the source code example:

# create a rectangular surface for the ball
ballsurface = pygame.Surface((50,50))   
# draw blue filled circle on ball surface, (0,0,255), (25,25),25) 

In the first code line, a pygame surface is created with the dimensions 50 pixel width (x-axis) and 50 pixel height (y-axis). This little pygame surface is named ball. The second code line draws a circle on the surface ball with the colours 0 (no portion of red), 0 (no portion of green), 255 (full portion of blue) at the position (25,25) counted from the top left corner of the ball surface. (25,25) is exactly the middle of (50,50). This circle has a radius of 25 pixels, and because there is no line width argument, pygame falls back to the default width of 0 which results in a blue filled circle.

Some Drawing Functions

In the official pygame documentation, the chapter draw lists 9 drawing functions. 4 of them are used in this code example to draw green figures on the background surface. Try to change the values and see what happens:

#------- try out some pygame draw functions --------
# pygame.draw.rect(Surface, color, Rect, width=0): return Rect
pygame.draw.rect(background, (0,255,0), (50,50,100,25)) # rect: (x1, y1, width, height)
#, color, pos, radius, width=0): return Rect, (0,200,0), (200,50), 35)
# pygame.draw.polygon(Surface, color, pointlist, width=0): return Rect
pygame.draw.polygon(background, (0,180,0), ((250,100),(300,0),(350,50)))
# pygame.draw.arc(Surface, color, Rect, start_angle, stop_angle, width=1): return Rect
pygame.draw.arc(background, (0,150,0),(400,10,150,100), 0, 3.14) # radiant instead of grad


  • Paint a giant pink circle on the middle of the screen
  • Find out wich line you must out-comment (using #) to remove the blue ball and the black square
  • Can you use the pygame.draw.polygon function to draw a pentagram:
    Pentagram. source:
  • Can you make an arc from the topright to the lower-left corner1)?
  • Use python's range function to draw a pretty pattern across the screen. Start with this code and expand to all 4 corners:
for point in range(0,641,64): # range(start, stop, step)
   pygame.draw.line(background, (255,0,255), (0,0), (480, point), 1)
  • Can you use the point variable also inside the color tuple to make each line with a different color?


Source Code on Github

file in folder download comment pygame Download the whole Archive with all files from Github:
simple version pygame pretty version

Simple Version

This version draws some lines and blits a surface. no fancy stuff.

View/Edit/Download the file directly in Github:

OOP Version


  • using 2 different class objects, one for the game, one for the ball. See →sprites
  • better text display, see →text

comment this page

1) you need a rect that is 4 times the screen size

en/pygame/step003.txt · Last modified: 2014/01/09 11:07 (external edit)