How to use scroball to complete window tkinter - python3

Question

I made a code using tkinter (beginner in python), I think its py3, which should show images in a GUI, all went well until I decided to generate a scrollbar to the "root", im just starting with tkinter and I have used the grid option, when I try to add scroll bar, it sticks to one "cell" of the grid, i wish to use it for the whole GUI; I have read that I should use Frame -> Canvas -> Scrollbar + Content, but when I try this, all my code isn't shown, is there a possible way to like embed my code into a Canvas/Frame, it would be good to do that so I add a frame above with other content.

from tkinter import *
from PIL import ImageTk,Image
import itertools
import random
root=Tk()

root.title('Pyramid')
root.configure(bg='#0a6c03')


# Define Players
def Players():
    global players
    players = {}
    global labelPlayers
    labelPlayers = {}
    global player_amount
    player_amount = int(input("Amount of players: "))
    for i in range(1,player_amount+1):
        players["player" + str(i)] = input("Enter Player "+str(i)+" name: ")

# Define Hand's Cards Amount
def Card_amount():
    global hand_cards_amount
    hand_cards_amount = int(input("Amount of Cards for Players Hands: "))

# Deck
def Deck():
    global number
    number = ["A","2","3","4","5","6","7","8","9","10","J","Q","K"]
    global suit
    suit = ["C","S","D","H"]
    global deck
    deck = list(itertools.product(number,suit))

# Shuffle_Deck
def Deck_Shuffle(deck):
    global card
    random.shuffle(deck)
    for i in range(0,10):
        card = deck[i][0]+deck[i][1]
    return card
# Amount of Levels for the Pyramid

def Levels():
    global pyramid_levels
    pyramid_levels = int(input("Amount of levels the pyramid will have: "))

# Creating Hands Layout

def Game():


    Levels()
    Deck()
    hands = {}
    cards = {}
    print(pyramid_levels)
    for i in range(0, pyramid_levels):
        labelLevels = Label(root, text='Level '+ str(pyramid_levels - i), fg="white", bg="#0a6c03", font=" Arial 20 bold")
        labelLevels.grid(row=i, column=0)
        hands["hand" + str(i)] = cards
        for j in range(0,i+1):
            Deck_Shuffle(deck)
            im = ImageTk.PhotoImage(Image.open("images/" + card + ".png").resize((100, 150), Image.ANTIALIAS))
            cards["card"+str((i*10)+j)] =im
            labelIm = Label(root, image=cards['card'+str((i*10)+j)], bg="#0a6c03")
            labelIm.grid(row=i, column=j+1, columnspan=pyramid_levels-i)
    

    root.mainloop()

Game()

What i have tried:

from tkinter import *
from PIL import ImageTk,Image
import itertools
import random
root=Tk()

root.title('Pyramid')
root.configure(bg='#0a6c03')

# Main Frame
frame_main = Frame(root)
frame_main.grid(sticky='news')

# Frame for Canvas
frame_canvas = Frame(frame_main)
frame_canvas.grid(row=2, column=0, pady=(5, 0), sticky='nw')
frame_canvas.grid_rowconfigure(0, weight=1)
frame_canvas.grid_columnconfigure(0, weight=1)

#Canvas
canvas = Canvas(frame_canvas)
canvas.grid(row=0, column=0, sticky="news")

# Scrollbar in canvas
vscrollbar = Scrollbar(frame_canvas, orient="vertical", command=canvas.yview)
vscrollbar.grid(row=0, column=1, sticky='ns')
canvas.configure(yscrollcommand=vscrollbar.set)

# Frame for Code
frame_pyramid = Frame(canvas)
canvas.create_window((0, 0), window=frame_pyramid, anchor='nw')


# Define Players
def Players():
    global players
    players = {}
    global labelPlayers
    labelPlayers = {}
    global player_amount
    player_amount = int(input("Amount of players: "))
    for i in range(1,player_amount+1):
        players["player" + str(i)] = input("Enter Player "+str(i)+" name: ")

# Define Hand's Cards Amount
def Card_amount():
    global hand_cards_amount
    hand_cards_amount = int(input("Amount of Cards for Players Hands: "))

# Deck
def Deck():
    global number
    number = ["A","2","3","4","5","6","7","8","9","10","J","Q","K"]
    global suit
    suit = ["C","S","D","H"]
    global deck
    deck = list(itertools.product(number,suit))

# Shuffle_Deck
def Deck_Shuffle(deck):
    global card
    random.shuffle(deck)
    for i in range(0,10):
        card = deck[i][0]+deck[i][1]
    return card
# Amount of Levels for the Pyramid

def Levels():
    global pyramid_levels
    pyramid_levels = int(input("Amount of levels the pyramid will have: "))

# Creating Hands Layout

def Game():


    Levels()
    Deck()
    hands = {}
    cards = {}
    print(pyramid_levels)
    count_rows = 0
    count_columns = 0
    for i in range(0, pyramid_levels):
        labelLevels = Label(frame_pyramid, text='Level '+ str(pyramid_levels - i), fg="white", bg="#0a6c03", font=" Arial 20 bold")
        labelLevels.grid(row=i, column=0)
        hands["hand" + str(i)] = cards
        # if count_rows < i:
        #     count_rows += 1
        for j in range(0,i+1):
            Deck_Shuffle(deck)
            im = ImageTk.PhotoImage(Image.open("images/" + card + ".png").resize((100, 150), Image.ANTIALIAS))
            cards["card"+str((i*10)+j)] =im
            labelIm = Label(frame_pyramid, image=cards['card'+str((i*10)+j)], bg="#0a6c03")
            labelIm.grid(row=i, column=j+1, columnspan=pyramid_levels-i)
            # if count_columns < j:
            #     count_rows += i
    first5columns_width = pyramid_levels
    first5rows_height = pyramid_levels
    frame_pyramid.config(width=first5columns_width + vscrollbar.winfo_width(),
                        height=first5rows_height)
    canvas.config(scrollregion=canvas.bbox("all"))

    root.mainloop()

Game()

How it looks:

Image