title: Pygame Surface layers: Transparent sprite layer issues
body: <p>I am drawing a small colored square, using <code>surface.fill(color, rect)</code>, on a sprite surface, which is then be displayed on top of the other surfaces in the following order:</p>
  
  <ol>
  <li>Background surface</li>
  <li>Maze surface</li>
  <li>Sprite surface</li>
  </ol>
  
  <p>Currently I am having a problem where my sprites smear across the screen because I'm not wiping the screen each time. <strong>How can I eliminate this smearing effect, while keeping the sprite layer from covering the other layers?</strong></p>
  
  <p><strong>Layers code - Initialized, but not updated each frame.</strong></p>
  
  <pre><code>game_surface = pygame.Surface((self.canvas.get_size()))
  game_surface = game_surface.convert()
  game_surface.fill((0,0,255))
  maze_surface = pygame.Surface((self.canvas.get_size()))
  maze_surface = maze_surface.convert_alpha()
  maze_surface.fill((0,0,255,0))
  play_surface = pygame.Surface((self.canvas.get_size()))
  play_surface = play_surface.convert_alpha()
  play_surface.fill((0,0,0,0))
  </code></pre>
  
  <p>Presently only the <code>play_surface</code> actually actually uses transparency, but eventually both the <code>play_surface</code> and the <code>maze_surface</code> will need to be transparent.</p>
  
  <p><strong>Sprites layer update - Called every time the sprite is moved.</strong></p>
  
  <pre><code>def update(self, canvas):
  
      # move sprite if keys pressed (not shown)
  
      self.surface.fill((0,0,0,0)) # Newest screen fill attempt. Causes smearing effect
      self.surface.fill(self.color, self.rect) # draw green square
      canvas.blit(self.surface, (0,0))
  </code></pre>
  
  <p><strong>Smear effect: Red = <code>maze_layer</code>, Green = smeared sprite</strong>
  <img src="https://i.stack.imgur.com/68uuj.png" alt="Red = maze_layer, Green = sprite">
  <strong>Alternate sprite fill - Altered version of the above</strong></p>
  
  <pre><code>def update(self, canvas):
  
      # move sprite if keys pressed (not shown)
  
      self.surface.fill((0,0,0)) # Original screen fill. Covers up lower layers
      self.surface.fill(self.color, self.rect) # draw green square
      canvas.blit(self.surface, (0,0))
  </code></pre>
  
  <p><strong>Non-transparency - Black = filled color (I want to do this without covering up the other layers)</strong>
  <img src="https://i.stack.imgur.com/wtEzU.png" alt="Non-transparent :("></p>
  
  <p><strong>How can I eliminate this smearing effect (pic 1), while keeping the sprite layer from covering up the other layers (pic 2)?</strong> Any assistance is very much appreciated.</p>