[Tkinter] Transparent Canvas

[finndude]

Hi,

I have this code here:

from tkinter import *

window=Tk()

window.title("Drawing Shapes on Button Press")

window.attributes("-fullscreen", True)                                                            
window.resizable(False,False)

window.configure(background="green")

def circle():
    c = Canvas(window,width=250, height=250)
    c.pack()

    #Draw an Oval in the canvas
    c.create_oval(60,60,210,210)

button = Button(window, text="Circle", command=circle)
button.pack()

window.mainloop()

It outputs a screen with a green background and a button saying circle, when you press circle it creates a circle. However, the circle has a white background around it and is filled with the same white. How can make it so that it is just the black ring, with nothing in or around it?

Thanks!

[woooee]

See "fill" at https://dafarry.github.io/tkinterbook/ca...val-method

[deanhystad]

I cannot find a way to set the canvas background color to transparent. You could inherit the window's background. That will not solve the problem of drawing a canvas on a complex background, but it will work for your example.

import tkinter as tk
 
window = tk.Tk()
window.title("Drawing Shapes on Button Press")
window.geometry("300x300")
window.configure(background="green")
 
def circle():
    c = tk.Canvas(window, width=100, height=100, background=window["bg"], bd=0, highlightthickness=0)
    c.pack()
    c.create_oval(0, 0, 99, 99)
 
tk.Button(window, text="Circle", command=circle).pack()
 
window.mainloop()

For drawing on a complex background my suggestion is make a big canvas and draw everything on the canvas, including things like buttons and labels if need be.

import tkinter as tk
from random import randint

def circle():
    x = randint(0, 299)
    y = randint(0, 299)
    diameter = randint(10, 100)
    canvas.create_oval(x, y, x + diameter, y + diameter)


def rectangle():
    x = randint(0, 299)
    y = randint(0, 299)
    canvas.create_rectangle(x, y, x + randint(10, 100), y + randint(10, 100))


def text():
    x = randint(0, 299)
    y = randint(0, 299)
    canvas.create_text(x, y, text=f"x={x}, y={y}")


window = tk.Tk()
window.title("Drawing Shapes on Button Press")
window.geometry("300x300")
canvas = tk.Canvas(window, bg="green")
canvas.pack(expand=True, fill=tk.BOTH)
tk.Button(canvas, text="Circle", command=circle).pack(pady=10)
tk.Button(canvas, text="Rectangle", command=rectangle).pack()
tk.Button(canvas, text="Text", command=text).pack(pady=10)

window.mainloop()

[Larz60+]

You can set a canvas oval background to transparent (or any color) (according to the original (Jhohn Shipman) manual)
here's the info from page 33

If you don't have a copy of this manual, get one here: https://www.cs.cmu.edu/~15110-n15/pa/pa9...erence.pdf

fill The default appearance of an oval's interior is transparent, and a value
of fill='' will select this behavior. You can also set this option to
any color and the interior of the ellipse will be filled with that color;
see Section 5.3, “Colors” (p. 10).

[deanhystad]

I don't think findude is asking about fill. I think findude's question is best asked by using an example.

import tkinter as tk

root = tk.Tk()
root.geometry("300x300")

# Make a canvas that fills the window and draw a large square
a = tk.Canvas(root, width=300, height=300, bg="yellow")
a.place(x=0, y=0)
a.create_rectangle(50, 50, 250, 250)

# Make another canvas that occludes the first.
b = tk.Canvas(root, width=200, height=200)
b.place(x=50, y=50)

root.mainloop()

The example makes two Canvas objexts; a and b. b is placed so it occludes a portion of a, hiding the square rectangle drawn in a. findude wants to know if b could be made transparent so you could see the square "underneath" b. I've searched a bit and found no way this can be done. Unlike the fill for objects added to a canvas, there is no transparent color that can be used as the background for the canvas object.

[Larz60+]

I thought that I had figured out a way to do this, but that was many years ago, and probably another graphics package.

There is one link that claims it can be done on MS windows here: https://stackoverflow.com/a/22106858
and another one under that for macOS.

I've not used tkinter much lately, so tend to agree with you.

[deanhystad]

That makes the tkinter window transparent so you can see the desktop. It is like cutting a porthole in the window so you can see through. In Windows you can also set the "-alpha" attribute to set the opacity/transparency of the window (0 is transparent, 1 is opaque, between 0 and 1 is translucent to varying degrees). finndude wants to set the background of the canvas widget background to transparent so it doesn't hide the tkinter window.

[finndude]

I cannot find a way to set the canvas background color to transparent. You could inherit the window's background. That will not solve the problem of drawing a canvas on a complex background, but it will work for your example.

import tkinter as tk
 
window = tk.Tk()
window.title("Drawing Shapes on Button Press")
window.geometry("300x300")
window.configure(background="green")
 
def circle():
    c = tk.Canvas(window, width=100, height=100, background=window["bg"], bd=0, highlightthickness=0)
    c.pack()
    c.create_oval(0, 0, 99, 99)
 
tk.Button(window, text="Circle", command=circle).pack()
 
window.mainloop()

For drawing on a complex background my suggestion is make a big canvas and draw everything on the canvas, including things like buttons and labels if need be.

import tkinter as tk
from random import randint

def circle():
    x = randint(0, 299)
    y = randint(0, 299)
    diameter = randint(10, 100)
    canvas.create_oval(x, y, x + diameter, y + diameter)


def rectangle():
    x = randint(0, 299)
    y = randint(0, 299)
    canvas.create_rectangle(x, y, x + randint(10, 100), y + randint(10, 100))


def text():
    x = randint(0, 299)
    y = randint(0, 299)
    canvas.create_text(x, y, text=f"x={x}, y={y}")


window = tk.Tk()
window.title("Drawing Shapes on Button Press")
window.geometry("300x300")
canvas = tk.Canvas(window, bg="green")
canvas.pack(expand=True, fill=tk.BOTH)
tk.Button(canvas, text="Circle", command=circle).pack(pady=10)
tk.Button(canvas, text="Rectangle", command=rectangle).pack()
tk.Button(canvas, text="Text", command=text).pack(pady=10)

window.mainloop()

Hi,

Think this is what Im gonna try. The idea is if i had an image in the background i can still see the image with the circle on top. This looks like a possible solution.

[joe_momma]

The idea is if i had an image in the background i can still see the image with the circle on top

Canvas has an image object, create_image. Then create your oval next which will put it over the image, no need for transparency. Things on the canvas can be raised and lowered. Make one canvas and use it as your background. You can do it.