Javascript 防止画布在重画时闪烁？

我目前正在重画如下：

这很好，除了偶尔角色精灵会闪烁。这足以成为一个相当大的烦恼。我应该如何更有效地执行此操作？我还试着改变重画频率。较高的频率加剧了问题，而较低的频率由于图形原因不够快

init()
{
//stuff
    return setInterval(draw,100);
}

function draw()
{
    drawBackground();
    character.draw(); //draws a sprite
}

//this function is called when character is created
Character.prototype.setImage = function ()
{
    this.avatar= new Image();
    this.avatar.onload=function(){
            this.imageLoaded=true;
    };
    this.avatar.src='/img/sprite.png';
}

Character.prototype.draw=function(ctx)
{  
    var imageW=this.imageW;
    var imageH=this.imageH;

    ctx.drawImage(avatar,20,20,imageW,imageH);

}

---

为什么每次绘制背景时都要下载背景图像？也许下一个代码更好：

var bg=null,ctxDrawInterval=-1;
init() {
  //stuff
  bg=new Image();
  bg.onload=function(){
    ctx.drawImage(bg,0,0,GAME_WIDTH,GAME_HEIGHT);
    ctxDrawInterval=setInterval(draw,100);
  }
  //bg.onerror=function(){
  //  what if error downloading?
  //}
  bg.src='img/background.png'; // must be placed after bg.onload
}

function draw() {
  drawBackground();
  character.draw(); //draws a sprite
}

function drawBackground() {
  ctx.drawImage(bg,0,0,GAME_WIDTH,GAME_HEIGHT);
}

---

当我试着为角色sprite（你可以在我的原始问题的底部看到代码）设置时，它闪烁得更厉害。我无法在

onload

中设置角色绘图的间隔，因为它需要与全局计时器同步。基本思想是在使用前预加载所有图像（背景、角色精灵）。当下载完所有图像后，启动一个动画。我试过了，但JSFIDLE似乎不喜欢面向对象，而且它会出现随机错误：