DrawStat ( );

function drawSprite ( canvas, index, x, y ) {

    let context = canvas.getContext(`2d`);

    context.drawImage (             // Dest Context
        Sprites[index].canvas,      // Source Canvas

        0,                          // Source X
        0,                          // Source Y
        Sprites[index].xspan,       // Source W
        Sprites[index].yspan,       // Source H

        x * Sprites[index].xspan,   // Dest X
        y * Sprites[index].yspan,   // Dest Y

        Sprites[index].xspan,       // Dest W
        Sprites[index].yspan        // Dest H
    );

    console.log(`Draw Sprite: "${Sprites[index].about.title}" @ ( ${x}, ${y} )`);


}

function drawText ( canvas, index, x, y, text ) {

    let context = canvas.getContext (`2d`);

    context.fillStyle = `argb( 255, 255, 255, 1.0 )`;

    context.fillText (
        text,
        x * Sprites[index].xspan,
        y * Sprites[index].yspan
    );

    console.log(`Draw Text: "${text}" @ ( ${x}, ${y} )`);
}

function drawSpriteText ( canvas, index, x, y, text ) {

    let context = canvas.getContext (`2d`);

    drawSprite ( canvas, index, x, y );
    drawText ( canvas, index, x + 1, y, text );
}

function drawStat ( canvas, index, x, y ) {

    drawSpriteText (
        canvas,
        HUD[index].sprite,
        x,
        y,
        `${HUD[index].name}: ${player[HUD[index].name]}`
    );

    console.log(`Draw Stat: ${HUD[index].name}: ${player[HUD[index].name]}`);

}


function bufferReset ( canvas ) {

    let context = canvas.getContext (`2d`);

    bufferClear ( canvas );
    bufferBlack ( canvas );

    debugCanvas ( canvas );

}