Animate text on canvas when there is an image loaded

Question

I am trying to get a bit of text to scroll in from the left into my canvas. It does work but it removes my image that is originally loaded into the canvas. I guess it is because the animate method redraws the canvas? Is there any way i can make it keep the image? Or draw it back in during the animation? or maybe i should have two layers somehow, is that possible? i don't know that much about the canvas.

Here is my test code:

http://jsfiddle.net/BT8TS/1/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

imageObj = new Image;
imageObj.src = 'http://ncity.azurewebsites.net/img/world.jpg';

context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

$({ left: -200 }).animate({ left: 10 }, {duration: 5000, step: function(now, fx) {
    moveTextOnCanvas(now);
}});

function moveTextOnCanvas(val) {
    var c=document.getElementById("myCanvas");
    c.width = c.width;
    var ctx=c.getContext("2d");
    ctx.font="30px Verdana";
    ctx.fillStyle="#000000";
    ctx.fillText("Text!", val, 90);
}

Answer 1

Try this.... Based on this answer by @jimr

Update this HTML

<div style="position: relative;">
 <canvas id="myCanvas" width="300" height="150" 
   style="position: absolute; left: 0; top: 0; z-index: 0;border:1px solid #d3d3d3;"></canvas>
 <canvas id="myCanvasText" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>  

Fiddle

---

Either you may use this plugin