How do I remove the light grey border around my Canvas widget?

Question

I’ve been messing with the Tkinter Canvas widget in order to see if I could make some aesthetically pleasing widgets, and I have a few questions.

First, why is there a light grey border around my Canvas widget, and how do I get rid of it?

Secondly, why is the top left most position in the Canvas (2,2)? It seems like it should be (0,0).

My current script:

from Tkinter import *

master = Tk()
master.configure(bg='black')
master.wm_attributes("-topmost", 1)

w = Canvas(master, width=150, height=40, bd=0,relief='ridge',)
w.pack()

color = 100
x0 = 2
y0 = 2
x1 = 151
y1 = 2

while y0 < 20 :
    r = color
    g = color
    b = color
    rgb = r, g, b
    Hex = '#%02x%02x%02x' % rgb
    w.create_line(x0, y0, x1, y1,fill=str(Hex), width=1)
    color = color - 2
    y0 = y0 + 1
    y1 = y1 + 1

color = 10

while y0 < 40 :
    r = color
    g = color
    b = color
    rgb = r, g, b
    Hex = '#%02x%02x%02x' % rgb
    w.create_line(x0, y0, x1, y1,fill=str(Hex), width=1)
    color = color + 4
    y0 = y0 + 1
    y1 = y1 + 1

mainloop()

Asked By: rectangletangle

||

Source

Answer 1

Section 6.8 Why doesn’t the canvas seem to start at 0,0? of the Tk Usage FAQ describes the phenomenon.

I was able to eliminate the border artefact with slight changes to the posted source…

Change this:

w = Canvas(master, width=150, height=40, bd=0, relief='ridge')
w.pack()

to:

w = Canvas(master, width=150, height=40, bd=0, highlightthickness=0, relief='ridge')
w.pack()

and this:

x0 = 2
y0 = 2
x1 = 151
y1 = 2

to:

x0 = 0
y0 = 0
x1 = 150
y1 = 0

Interestingly enough, the "borderwidth" attribute did not make a difference, but I left it in per the FAQ.

Running w.config() immediately after the Canvas initialization statement showed the defaults to be 2 for highlightthickness and 0 for border width.

Answered By: T.P.

Answer 2

The short answer is, the Canvas has two components which affect the edges: the border (borderwidth attribute) and highlight ring (highlightthickness attribute).

If you have a border width of zero and a highlight thickness of zero, the canvas coordinates will begin at 0,0. Otherwise, these two components of the canvas infringe upon the coordinate space.

What I most often do is set these attributes to zero. Then, if I actually want a border I’ll put that canvas inside a frame and give the frame a border.

Answered By: Bryan Oakley

Answer 3

If adding highlightthickness in the canvas class instance throws an error (it was recently doing for me). Add it in config as shown below:

canvas=Canvas(width=206,height=260, bg=YELLOW)
canvas.config(highlightthickness=0)

Answered By: Manish

How do I remove the light grey border around my Canvas widget?

Question:

Answers: