game design – My HTML Canvas went blank


I tried to draw Mario Sprites in my HTML Canvas, but it always went blank.
Anybody knows why?

var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
var mario;
var marioSprite;
var tiles;
var speedX = 1;

//marioSprite Specification
mario = {
    //target picture specification X & Y, Width & Height
    px:276,
    py: 44,
    pwidth: 16,
    pheight: 16,
    //drawing on Canvas specification X & Y, Width & Height
    cx: 16,
    cy: 116,
    cwidth:16,
    cheight:16,
}


//draw Mario in Canvas
function drawMarioSprite(){
    marioSprite = new Image();
    marioSprite.src = "http://gamedev.stackexchange.com/file:///C:/Users/MASTONO ALI/Desktop/img/characters.gif";
    marioSprite.addEventListener('load', e => {
    ctx.drawImage(marioSprite, 
        mario.px, mario.py, mario.pwidth, mario.pheight, 
        mario.cx, mario.cy, mario.cwidth, mario.cheight);
    });
    this.position = function() {
        this.mario.cx += speedX;       
    }
    position();
}//drawMarioSprite() end

//drawTiles and tilesLoop
function drawTiles() {
    tiles = new Image();
    tiles.src = 'file:///C:/Users/MASTONO ALI/Desktop/img/tiles.png';
    tiles.addEventListener('load', e => {
        tilesLoop();
    });
}
function tilesLoop(){
    for (let x = 0; x < 25; x++){
        for (let y = 11; y < 13; y++){
            ctx.drawImage(tiles, 
                0, 0, 26, 26, 
                x*12, y*12, 20, 20);
        }
    }
}//drawTiles() end


function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawMarioSprite();
    drawTiles();
    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);