Jquery 加载图像时在画布上设置文本动画

我正在尝试获取一点文本，以便从左侧滚动到画布中。 它确实可以工作，但它会删除最初加载到画布中的图像。 我猜这是因为动画方法重画了画布？ 我有没有办法让它保留图像？还是在动画期间将其拉回？ 或者我应该有两层，可能吗？ 我对画布不太了解

以下是我的测试代码：

试试这个。。。。基于@jimr

更新此HTML

---

你可以用

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);
}

<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>