Image not getting drawn on tkinter canvas

Question

I would like to display a knapsack image on green canvas. The height and width of that canvas is 250X250 pixels.

And the size of the image is 260X280 pixels.

When I try to execute below code, I get the output as shown in screenshot above 1 . The location of the code file and image file is same.

from tkinter.font import BOLD
from tkinter import *
import tkinter
from PIL import Image, ImageTk

root = Tk()

def draw():
    global canvas
    root.geometry('1080x720')
    root.state('zoomed')

    canvas = Canvas(root,bg='black',highlightthickness=0)
    canvas.pack(fill=tkinter.BOTH, expand=True)

    sw = root.winfo_screenwidth()
    sh = root.winfo_screenheight()
    canvas.create_line(int(sw*0.0000),int(sh*0.1736),int(sw*0.6510),int(sh*0.1736),fill='white')
    canvas.create_line(int(sw*0.6510),int(sh*0.0000),int(sw*0.6510),int(sh*1.0000),fill='white')
    canvas.create_line(int(sw*0.6510),int(sh*0.1157),int(sw*1.0000),int(sh*0.1157),fill='white')
    canvas.create_line(int(sw*0.6510),int(sh*0.8101),int(sw*1.0000),int(sh*0.8101),fill='white')

    UI_frame1 = Frame(canvas,bg='black',width=int(sw*0.6510),height=int(sh*0.1580))
    canvas.create_window(0,0, anchor=NW,window=UI_frame1)
    
    N = Label(UI_frame1,text='N',bg ='black',fg='white',font=(12))
    N.grid(row=0,column=0, padx=139,pady=22)
    weights = Label(UI_frame1,text='Weights',bg ='black',fg='white',font=(12))
    weights.grid(row=0,column=1,padx=140,pady=22)
    val = Label(UI_frame1,text='Values',bg ='black',fg='white',font=(12))
    val.grid(row=0,column=2,padx=140,pady=22)
    
    n = Entry(UI_frame1,bg='white',width=4,font=(12))
    n.grid(row=1,column=0,padx=50,pady=17)
    value_arr = Entry(UI_frame1,bg='white',font=(12))
    value_arr.grid(row=1,column=1,padx=50,pady=17)
    weight_arr = Entry(UI_frame1,bg='white',font=(12))
    weight_arr.grid(row=1,column=2,padx=50,pady=17)

    Label(canvas,text='i',bg='black',fg='white',font=(14)).place(x=150,y=185)
    i = Label(canvas,text="  i  ",bg='white',font=(12)).place(x=175,y=185)
    Label(canvas,text='j',bg='black',fg='white',font=(14)).place(x=525,y=185)
    j = Label(canvas,text="  j  ",bg='white',font=(12)).place(x=550,y=185)


    table = Canvas(canvas,bg='red',width=600,height=450)
    table.place(x=75,y=300)

    w = int(600/8)
    h = int(450/5)
    x=0
    y=0
    for r in range(5):
        for c in range(8):
            table.create_rectangle(x,y,x+w,y+h)
            x+=w
        y+=h
        x=0
    
    UI_frame2 = Frame(canvas,bg='blue',width=250,height=250)
    canvas.create_window(835,630, anchor=CENTER,window=UI_frame2)

    image_c = Canvas(UI_frame2,bg='green',highlightthickness=0,width=250,height=250)
    image_c.grid(row=0,column=0,padx=0,pady=0)

    photo = ImageTk.PhotoImage(file ='knapsack.png')
    image_c.create_image(835,630,image=photo,anchor=NW)


draw()
root.mainloop()

I would like to cover the entire green canvas with single image of knapsack. I am not any error while running the GUI. Anyone could help me out, I'll be really thankful.

Answer 1

There are two problems:

First:

You display in position (835,630) but canvas has visible only (250, 250) - (top left corner is (0,0) ) - so photo is in place which you can see.

Second:

There is bug in PhotoImage() which removes image from memory when it is assigned to local variable. One of solution is to use global photo to assign it to global variable.

def draw():
    global canvas
    global photo   # use global variable
    
    #... code ...

    photo = ImageTk.PhotoImage(file='knapsack.png')
    image_c.create_image(0, 0,image=photo, anchor=NW)   # position (0,0)

Doc (on archive.org): PhotoImage - see Note at the botton of doc.

Other problem can be that image has big (transparent) margins around object and it may show object in differnt place then you may expect.
Screenshot shows photo in position (0,0) but object is in center of green canvas.