title: Problems In PyGame By Zooming A Background Picture
body: <p>I was trying to make a game that has a world map at the background. In this game the user could have been able to zoom the picture or drag the picture by clicking the mouse and moving it. First, I tried to add the zooming feature but strange things happen when the user clicks the mouse in order to zoom the picture. The picture is divided into squares. Here is the picture and my code. 
  This is the picture:[1]: <a href="https://i.stack.imgur.com/dQhfX.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/dQhfX.jpg</a> [1]: </p>
  
  <p>This is what happens: <a href="https://i.stack.imgur.com/qdlqt.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/qdlqt.jpg</a></p>
  
  <pre><code>import pygame
  import time
  from pygame.locals import *
  clock = pygame.time.Clock()
  pygame.init()
  WHITE = (255, 255, 255)
  WIDTH = 1280
  HEIGHT = 800
  windowSurface = pygame.display.set_mode((WIDTH, HEIGHT), 0, 32)
  img = pygame.image.load("/Users/Esat/Desktop/map.jpg")
  img = pygame.transform.scale(img,(WIDTH,HEIGHT))
  
  while True:
          events = pygame.event.get()
          button_down = pygame.mouse.get_pressed()
          if button_down == (1,0,0):
              print("Clicked")
              WIDTH = WIDTH+10
              HEIGHT = HEIGHT+10
              img = pygame.transform.scale(img, (WIDTH, HEIGHT))
          for event in pygame.event.get():
              if event.type == QUIT:
                  pygame.quit()
                  sys.exit()
  
          windowSurface.fill(WHITE)
          windowSurface.blit(img, (0, 0)) 
          clock.tick(60)
          pygame.display.flip()
  </code></pre>