Why is image rotated diagonally?

Question

Recently I tried to use ImageGrab and replicate the screen.But when I writed following code and runed it after drawing Image was rotated diagonally. Does anyone know why this happens?Is problem with ImageGrab, pygame or something else?

This is my code so far:

from PIL import ImageGrab
import pyautogui
import pygame

colors=[]
WIDTH,HEIGHT=pyautogui.size()
image=ImageGrab.grab()
for x in range(0,WIDTH,5):
    for y in range(0,HEIGHT,5):
        color=image.getpixel((x,y))
        colors.append(color)
screen=pygame.display.set_mode((WIDTH,HEIGHT))
pixel_y=-5
pixel_x=0
for k,v in enumerate(colors):
    pixel_y+=5
    if pixel_y>HEIGHT:
        pixel_x+=5
        pixel_y=0
    pixel=pygame.Rect(pixel_x,pixel_y,5,5)
    pygame.draw.rect(screen,v,pixel)
    pygame.display.update(pixel)

Answer 1

You are drawing too many pixels in one column. Change:

if pixel_y>HEIGHT:

if pixel_y >= HEIGHT:

Simplify your code using the // (floor division) operator and the % (modulo) operator (the % operator computes the remainder of an integral division):

h = HEIGHT // 5
for k, v in enumerate(colors):
    pixel = pygame.Rect(k // h * 5, k % h * 5, 5, 5)
    pygame.draw.rect(screen, v, pixel)
    pygame.display.update(pixel)