Extra pixels left and top of canvas python turtle - python-3.x

Question

I'm not sure why but on the left and top of a canvas I'm getting weird behaviour while creating my snake game using turtle. There's a border of 10 pixels on the left and on the top.
Main Code
import functools
from turtle import Screen
import time
from Snake import Snake
# initialize screen
win = Screen()
WIDTH = HEIGHT = 800
win.setup(width=WIDTH, height=HEIGHT)
win.bgcolor("black")
canvas = win.getcanvas()
root = canvas.winfo_toplevel()
root.overrideredirect(1)
win.tracer(0)
s = Snake()
def main():
segments = s.init_segments()
win.update()
move_keys = ["Right", "Up", "Left", "Down"]
running = True
inc = 0
for k in move_keys:
win.onkeypress(functools.partial(s.move, segments, inc, k), key=k)
inc += 90
win.listen()
while running:
win.update()
time.sleep(0.1)
s.move(segments, segments[0].heading(), "none")
if s.crashed(win.window_width(), win.window_height(), segments):
running = False
break
win.exitonclick()
main()
Snake Code
from turtle import Turtle
class Snake:
def init_segments(self):
segs = []
x_pos = 0
for i in range(3):
t = Turtle(shape="square")
t.color("white")
t.penup()
t.speed(1)
segs.append(t)
if t != segs[0]:
x_pos -= 20
t.goto(x_pos, 0)
return segs
def __no_turn(self, h, d):
if h - d == -180 or h - d == 180:
return True
else:
return False
def __no_skip(self, k, dir):
if (k == "Right" and dir == 0 or k == "Up" and dir == 90
or k == "Left" and dir == 180 or k == "Down" and dir == 270):
return False
else:
return True
def move(self, t_list , dir, k):
for seg_num in range(len(t_list) - 1, -1, -1):
if self.__no_turn(t_list[0].heading(), dir):
continue
elif seg_num > 0:
if self.__no_skip(k, dir):
t_list[seg_num].goto(t_list[seg_num - 1].position())
else:
t_list[seg_num].setheading(dir)
if self.__no_skip(k, dir):
t_list[seg_num].forward(20)
def crashed(self, window_width, window_height, t_list):
head_position = t_list[0].position()
body_positions = []
hw = window_width/2
hh = window_height/2
for i in range(len(t_list)):
body_positions.append(t_list[i].position())
body_positions.pop(0)
for i in range(len(body_positions)):
if head_position == body_positions[i]:
return True
if head_position[0] >= hw:
print(f"Head Position: {head_position[0]} ... Wall Position: {hw}")
return True
elif head_position[0] <= -hw:
print(f"Head Position: {head_position[0]} ... Wall Position: {-hw}")
return True
elif head_position[1] >= hh:
print(f"Head Position: {head_position[1]} ... Wall Position: {hh}")
return True
elif head_position[1] <= -hh:
print(f"Head Position: {head_position[1]} ... Wall Position: {-hh}")
return True
The print lines in this file were added to try and figure out what was going on.
Please help me understand what's going on.
Thanks.
Edit:
Also I didn't notice it earlier, but there's a 1px border on the bottom and right hand sides.
Second Edit to illustrate the problem further.
I added the code for the pills a while ago. What I do is, I spawn every pill in all at once and hide them because you can't destroy a turtle without clearing the screen and it would be weird to get the turtle position every single time and redraw the turtle on the screen where it had been 0.1 seconds previously. Then I got this result.
As you can see the pills are spawning off screen.
The following is the code that I used in order to spawn in all pills and is similar to the code that I use for determining the edges of the screen.
hw = int(WIDTH/2)
hh = int(HEIGHT/2)
p_list = []
for i in range(-hw, hw, 20):
for j in range(-hh, hh, 20):
p = Pill((i, j))
p.show_pill(segments)
p_list.append(p)
What happens when I reorder the win.update()
As you can see here, the right side now crashes one whole segment in. If you look closely, you'll see in this picture that the white of the snake, covers the extra pixel of space that is not covered in the previous picture where it stops on the last pixel of the circle.
You'll also see in the second picture and this one that there is a row of circles on the bottom that are peeking over the edge of the window's border.

Answer 1

If you move win.update() after s.move(segments, segments[0].heading(), "none") instead of before it will work (i.e) crash in the same way in all four walls.
If you don't want the head to get burst into the wall when crashing then modify the crash boundary check accordingly.

Answer 2

I've finally figured out why this happens.
First problem: I was previously led to believe that all turtle shapes are created equal. No they're not. While the default size for a turtle might be 20px by 20px, a square and circle are both defaulted to 21px as they need a center point that is not an even number so that it can divide evenly between the 4 quadrants of turtle's co-ordinate system (which has a single pixel serving as the x and y axes).
How to solve:
Make the canvas a multiple of 21px.
Remember that the canvas, when split into 2 parts has half of a turtle on each edge, which counts as a full turtle but the turtle only completes over the canvas, so we're sitting with an extra column and row of turtles.
Remove the last column and row of turtles and move the entire grid over by one turtle.
If done correctly you'll end up with the result below. Unfortunately, 2px at the right and bottom will be cut off as it's used for Turtle's UI. The top and left face a similar problem in that a single row of pixels are used for Turtle's UI
The snake itself is done in a similar manner in that instead of shifting the starting segment 20px I shift it 11px first and then I appended the other parts of the snake. I calculate it's position by removing the 11px that I shifted it initially. This literally solved most of the problems with the snake apart from stuff that Turtle's ui takes away.