why won't this draw on the mapcanvas

Question

I have no idea this this.canvas.getContext("2d").drawImage in the map function will not draw, It seems to be creating the canvas but just on drawing on it, it also does log all the numbers in mapData

const mapData = [
    [0, 1, 2],
    [3, 4, 5],
];

function Sprite(name, width, height, type, Col_Sprite,) {
    this.name = "Spr_" + name;
    this.ID = "Spr_" + name;
    this.Sprite =  new Image();
    this.type = type;
    this.width = width;
    this.height = height;
    this.Canvas = document.createElement("canvas");
    this.CanvasContext = this.Canvas.getContext("2d");  
    
    this.Canvas.id = this.ID;
    this.Canvas.width = this.width;
    this.Canvas.height = this.height;
    let self = this;
    
    if (this.type == "sprite") {
        this.Sprite.onload = function() {
            self.CanvasContext.drawImage(self.Sprite, 0, 0, self.width, self.height);
        };  
        this.Sprite.src = Col_Sprite;
    }else if (this.type == "color") {
        this.color = Col_Sprite
        this.CanvasContext.fillStyle = this.color;
        this.CanvasContext.fillRect(0, 0, this.width, this.height);
    }
}
function Tilesheet (name, sprite, tilewidth, tileheight) {
    this.name = name;
    this.sprite = sprite;
    this.tilewidth = tilewidth;
    this.tileheight = tileheight;
    this.tileIndex = [];
    
    for (let y = 0; y < this.sprite.height; y += this.tileheight) {
        for (let x = 0; x < this.sprite.width; x += this.tilewidth) {
            const tile = [x, y];
            tile.width = this.tilewidth;
            tile.height = this.tileheight;
            this.tileIndex.push(tile);
        }
    }
    console.log(this.tileIndex);
    
}
function Map(name, tilesheet, mapdata, canvas) {
    this.name = name;
    this.id = "map_" + name
    this.mapdata = mapdata;
    this.tilesheet = tilesheet;
    this.numofrow = mapdata.length;
    this.numofcolumn = mapdata[0].length;
    this.canvas = canvas;
    this.canvas.id = this.id;
    this.tileImg = this.tilesheet.sprite
    this.tilewidth = this.tilesheet.tilewidth;
    this.tileheight = this.tilesheet.tileheight;
    this.tileindex = this.tilesheet.tileIndex;
    this.canvascontext = this.canvas.getContext("2d");
    this.canvascontext.clearRect(0, 0, this.canvas.width, this.canvas.height);
    for (let x = 0; x < this.numofrow; x++) {
        for (let y = 0; y < this.numofcolumn; y++) {
            this.canvascontext.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.tileId = this.mapdata[x][y];
            this.tileX = x * this.tilewidth;
            this.tileY = y * this.tileheight;
            this.tileData = this.tileindex[this.tileId]; // Get the tile data
            if (this.tileData) {
                this.canvas.getContext("2d").drawImage (
                    this.tileImg.Canvas, //image
                    this.tileData[0] ,  //starting x of image
                    this.tileData[1],  //y
                    this.tilewidth, // ending x of the sprite
                    this.tileheight, // same thing befor just wil y
                    this.tileX, //where the sprite will be draw on the canvas x
                    this.tileY, //same thing befor just with y
                    this.tilewidth, //sprite width
                    this.tileheight //sprite height
                );
            }
            
        }
    }
}
const Objects = {
  Sprites: {},
  Tilesheets: {},
  Collisions: {},
  Players: {},
  Entities: {},
  Obstacles: {},
  Maps: {},
  Sounds: {},
};

const mySprite = new Sprite("PlayerSprite", 300, 300, "sprite", "Images/Hole.png");
Objects.Sprites[mySprite.name] = mySprite;

const myTilesheet = new Tilesheet("test", mySprite, 100, 100); // Adjust tile width and height
Objects.Tilesheets[myTilesheet.name] = myTilesheet;

const mapCanvas = document.createElement("canvas");
mapCanvas.width = myTilesheet.tilewidth * mapData[0].length;
mapCanvas.height = myTilesheet.tileheight * mapData.length;
mapCanvas.style.backgroundColor = "lightgray"; // Add this line to set a background color
document.body.appendChild(mapCanvas);

const myMap = new Map("testMap", myTilesheet, mapData, mapCanvas);
Objects.Maps[myMap.name] = myMap;

document.body.appendChild(mySprite.Canvas);

I've tried everything I can think of but nothing seems to work

EDIT: I've changed it a little bit but it still doesn't work

const mapData = [
    [0, 1, 2],
    [3, 4, 5],
];

function Sprite(name, width, height, type, Col_Sprite) {
    this.name = "Spr_" + name;
    this.ID = "Spr_" + name;
    this.Sprite =  new Image();
    this.type = type;
    this.width = width;
    this.height = height;
    if (this.type == "sprite") {
        this.Sprite.src = Col_Sprite;
    }else if (this.type == "color") {
        this.color = Col_Sprite
    }
}
function Tilesheet (name, sprite, tilewidth, tileheight) {
    this.name = name;
    self = this;
    sprite.onload = function() {
        
    };
    this.sprite = sprite;
    this.tilewidth = tilewidth;
    this.tileheight = tileheight;
    this.tileIndex = [];
    
    for (let y = 0; y < this.sprite.height; y += this.tileheight) {
        for (let x = 0; x < this.sprite.width; x += this.tilewidth) {
            const tile = [x, y];
            tile.width = this.tilewidth;
            tile.height = this.tileheight;
            this.tileIndex.push(tile);
        }
    }
    console.log(this.tileIndex);
    
}
function Map(name, mapdata) {
    this.name = name;
    this.id = "map_" + name
    this.mapdata = mapdata;
    this.numofrow = mapdata.length;
    this.numofcolumn = mapdata[0].length;
}
function DrawMap(map, canvasctx, tilesheet) {
    let mapdata = map.mapdata;
    let numofcolumn = map.numofcolumn;
    let numofrow = map.numofrow;
    let tilewidth = map.tilewidth;
    let tileheight = map.tileheight;
    let tileindex = tilesheet.tileIndex;
    console.log(tileindex);
    let tileImg = tilesheet.sprite;
    tileImg.Sprite.onload = function() {
        for (let x = 0; x < numofrow; x++) {
            for (let y = 0; y < numofcolumn; y++) {
                let tileId = mapdata[x][y];
                console.log(tileId);
                let tileX = x * tilewidth;
                let tileY = y * tileheight;
                let tileData = tileindex[2]; // Get the tile data
                canvasctx.drawImage (
                    tileImg.Sprite, //image
                    tileData[0],  //starting x of image
                    tileData[1],  //y
                    tilewidth, // ending x of the sprite
                    tileheight, // same thing befor just wil y
                    tileX, //where the sprite will be draw on the canvas x
                    tileY, //same thing befor just with y
                    tilewidth, //sprite width
                    tileheight //sprite height
                    );
                
                
            }
        }
    }
}
const Objects = {
  Sprites: {},
  Tilesheets: {},
  Collisions: {},
  Players: {},
  Entities: {},
  Obstacles: {},
  Maps: {},
  Sounds: {},
}
const mySprite = new Sprite("PlayerSprite", 300, 300, "sprite", "Images/Hole.png");
Objects.Sprites[mySprite.name] = mySprite;

const myTilesheet = new Tilesheet("test", mySprite, 100, 100); // Adjust tile width and height
Objects.Tilesheets[myTilesheet.name] = myTilesheet;

const mapCanvas = document.createElement("canvas");
const mapContext = mapCanvas.getContext("2d");
document.body.appendChild(mapCanvas);
mapCanvas.width = myTilesheet.tilewidth * mapData[0].length;
mapCanvas.height = myTilesheet.tileheight * mapData.length;

const myMap = new Map("testMap", mapData, mapContext, mapCanvas);
Objects.Maps[myMap.name] = myMap;
DrawMap(myMap, mapContext, myTilesheet);

still doesn't work for some reason