Borderwidth attribute in Tkinter not working

Question

I am trying to use borderwidth attribute to highlight only the "New Game" part of the png image, however, it isn't working, how do I solve this error?

from tkinter import *
from PIL import ImageTk, Image

root = Tk()
root.iconbitmap('unnamed.ico')
root.title('2048')


bg = ImageTk.PhotoImage(Image.open("welcome.png"))
new_game_btn = ImageTk.PhotoImage(Image.open("image_40.png"))

my_canvas = Canvas(root, width=780, height=550)
my_canvas.pack()
my_canvas.create_image(0, 0, image=bg, anchor=NW)

button1 = Button(root, image=new_game_btn, borderwidth=00, relief=FLAT)
button1_window = my_canvas.create_window(100, 100, anchor=NW, window=button1)
root.mainloop()

I watched a youtube video where the guys say applying zero to borderwidth gives no border width, so I thought if I would do the same then only the part inside of the blue color will be shown but it still shows some unwanted border although it is a png file, if this isn't the approach then what is? Thank you! — BigPy, May 04 '21 at 10:50
I did not understand your problem initially. Try to remove the background from the image (make it transpaarent). — frankenapps, May 04 '21 at 10:51
Yes, the image upfront is actually a transparent png image, but it still makes a border. — BigPy, May 04 '21 at 10:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231923/discussion-between-sushant-regmi-069-and-frankenapps). — BigPy, May 04 '21 at 11:04
@acw1668 which other library or widget should I look for if I want to support background transparency? Thanks!! — BigPy, May 04 '21 at 11:09
You can put the image using `create_image(...)` instead of putting a label using `create_window(...)`. — acw1668, May 04 '21 at 11:21

frankenapps · Answer 1 · 2021-05-04T11:47:28.303

Your only option seems to be to draw the image to the canvas instead of creating a button (because widgets in Tkinter do not support transparency).

The drawback is, that you will have to check the mouse coordinates on the Canvas in order to see if your "Button" has been clicked.

The code would look like this:

from PIL import ImageTk, Image

root = Tk()
root.iconbitmap('unnamed.ico')
root.title('2048')

bg = ImageTk.PhotoImage(Image.open("welcome.png"))
new_game_btn = ImageTk.PhotoImage(Image.open("image_40.png"))

my_canvas = Canvas(root, width=780, height=550)
my_canvas.pack()
my_canvas.create_image(0, 0, image=bg, anchor=NW)

my_canvas.create_image(100, 100, image=new_game_btn, anchor=NW)

root.mainloop()

This results in that (don't mind the typo...):

If you want to check if that part of the canvas was clicked, I would just check for the bounding box like this:

from tkinter import *
from PIL import ImageTk, Image

x_pos = 100
y_pos = 100
width = 100
height = 100

def callback(event):
    print("Canvas clicked at", event.x, event.y)
    if (event.x > x_pos and event.x < x_pos + width):
        if(event.y > y_pos and event.y < y_pos + height):
            print("The button was clicked (approximately).")

root = Tk()
root.iconbitmap('unnamed.ico')
root.title('2048')

bg = ImageTk.PhotoImage(Image.open("welcome.png"))
new_game_btn = ImageTk.PhotoImage(Image.open("image_40.png"))

my_canvas = Canvas(root, width=780, height=550)
my_canvas.pack()
my_canvas.create_image(0, 0, image=bg, anchor=NW)

my_canvas.create_image(100, 100, image=new_game_btn, anchor=NW)
my_canvas.bind("<Button-1>", callback)

root.mainloop()

You can use `tag_bind()` on the image item instead of binding on canvas. — acw1668, May 04 '21 at 12:40
Hey, @frankenaaps, I understood that you are suggesting to use that part of the canvas as a button, like if in a certain range in the window is clicked by the cursor then it'll show "The button was clicked (approximately).", my question is what dimensions do I need to change in the upper program in order to work this out? — BigPy, May 04 '21 at 13:10
It depends on your image and where you place it on the canvas. If you are ok with only an approximate button (e.g. the outer dimensions of the image) you can also use @acw1668 s approach and there is no need to set the coordinates and size of your button. You can however also use a circle or an ellipse as your bounding box, if you want to check more precisely. — frankenapps, May 04 '21 at 13:23

Borderwidth attribute in Tkinter not working

1 Answers1