将javascript代码与画布动画合并

我正在尝试“合并”一些javascript代码，这些代码用一个画布来更改图片，画布上也有动画，而不会相互抵消。在这张画布上有一些移动的云，我想把小猫扔进去

我理解这可能是一个基本的HTML5画布问题，但我使用画布时很糟糕。这是我第一次真正使用它。每当我试图实现适用于小猫的代码时，画布屏幕就会变成白色，什么也不显示

我想坚持使用我拥有的大部分代码。我真的很想保持画布的原样，不做任何改变，只想把那些小猫也放进去。有人能为我想出合适的方法吗

我猜我需要以某种方式调整动画功能

function animate(){
        ctx.save();
        ctx.clearRect(0, 0, cW, cH);        
        background.render(); 
        foreground.render(); 
        ctx.restore();
    }
    var animateInterval = setInterval(animate, 30);
}

代码都是在一个文件中，因为它太多了，无法在这里显示

---

编辑：为了清楚起见，我要求将小猫的图片放在画布上，但我希望画布中的云覆盖小猫。

您需要知道的是，默认情况下，画布元素是透明的。请注意我在这里做的一个小改动：

body{
背景：#667；
}
帆布{
宽度：50vw；
高度：50vh；
左缘：20%；
}
#形象{
边框：#000 1px实心；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
宽度：33%；
身高：100%；
位置：相对位置；
顶部：140px；
z指数：-1；
}
#我的画布{
边框：#000 1px实心；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
宽度：33%；
身高：100%；
}

var bg=新图像（）；
bg.src=”http://proverum.ru/templates/oblaka/img/cloud.png";
var fg=新图像（）；
fg.src=”http://www.tourisme-fumel.com/img_interf/meteo/cloudy.png";
函数initCanvas（）{
var lastTick=0；
变量位置={x:0，y:0}；
var rain=document.getElementById（'rain'）；
var ctx=document.getElementById（'my_canvas'）.getContext（'2d'）；
var canvas_container=document.getElementById（'my_canvas2'）；
var cW=ctx.canvas.width，cH=ctx.canvas.height；
函数背景（）{
这个.x=0，这个.y=0，这个.w=bg.width，这个.h=bg.height；
this.render=函数（）{
ctx.drawImage（bg，this.x--，0）；
如果（这个.x你应该把所有的代码都放在你的问题中，不管怎样。StackOverflow有一个自我托管的JSFIDLE的等价物，叫做snippets，可能很有用。对不起，不太清楚，你想对小猫做什么？把它们覆盖在画布上，用它们作为画布的背景？把它们覆盖在画布上。我只想转储我在那里，没有改变它们的纵横比。编辑：嗯，部分地覆盖它们。我想让它们在画布上，但让云在小猫面前移动，所以我知道我不能只使用css。