Q:

HTML5 draw text that stays on the top

I am creating a file called functions.js with diferent functions like:

bgImage()
drawImage()
setText()

My issue is that my text keeps staying behind. 
What i want to do is, when i call setText() i can put text where i want.   And the text will be put on the top ofc the convas.   I know i need to call the image draw load functions first to get them to not overwrite my text.   But i did so in my JS. 
So its very important that i can call the function setText() as many times as i want, after all images are drawn/set, and the text will be visible. 
I want the text on the top. 
Here is my code:
functions.js
var canvas = "";
var context = "";

function canvasInit() {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
}

function bgImage() {
    var imageObj = new Image();
    imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
}

function drawImage() {
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 10, 50);
        context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

function    (text) {
    context.font = 'italic 40pt Calibri';
    context.fillText(text, 150, 100);
}

index.html
<! DOCTYPE html>
<html>
<head>
    <script src="functions.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',ready);
        function ready() {
            canvasInit();
            bgImage();
            drawImage();
            setText("Yo");
            setText("heyyyy");
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400"></canvas>
</body>
</html>

Updated test that do not work:
index.html
<! DOCTYPE html>
<html>
<head>
    <script src="functions.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',ready);
        function ready() {
            canvasInit();
            bgImage(function() {
               setText(); 
            });
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400"></canvas>
</body>
</html>

functions.js
var canvas = "";
var context = "";

function canvasInit() {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
}

function bgImage(callback) { // add parameter for function

    var imageObj = new Image();
    imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();

        if (typeof callback === 'function')  {
            callback();  // invoke callback function
        }

    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';

}

function drawImage() {
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 10, 50);
        context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

function setText() {
    context.font = 'italic 40pt Calibri';
    context.fillText("Yoo adfa ds asd a sd", 150, 100);
}

A:

I never got my code to work.   However i found some framework called "http://kineticjs.com/" and i solved my issues using that. 
Thanks for the comments Ken - Abdias Software.   I did also take a look at what you linked to in your profile description.   Looking really neat ;)
However i feel its the best to accept the answer that solved my problem, and i solved it myself. 
Thanks again :)

