Мерцание во время визуализации в js и html из-за повторной загрузки изображения

Question

function renderFruit(){
  var xx3 = transformX(fruit.x); //transforms from COLS to x pixel values
  var yy3 = transformY(fruit.y); //transforms from ROWS to y pixel values

  // loads the picture onto HTML DOS
  fruit_image.onload = function(){
    ctx.drawImage(fruit_image,xx3,yy3,BOX_W+5,BOX_H+5)
  }

  fruit_image.src = 'Icons/apple.png'; //Picture for the fruit
}


function init(){
  renderSnake();
  renderFruit();
}


function render(){
  if(playing){
    ctx.clearRect(0,0,W,H);   //clears the canvas

    renderSnake();   //draws the snake

    renderFruit(); //draws the fruit

    setTimeout(render, 20); //calls render every 20ms
  }
  renderSnake();
}

  init();
  render();

Вот часть кода, который я считаю уместным.Это простая игра со змеями, с которой у меня не возникло никаких проблем, когда я просто рисовал прямоугольники как «фрукт».Однако, как только я начал загружать изображение как фрукт, у меня началось мерцание.Кто-нибудь знает, как это предотвратить?

Я полагаю, это связано с тем, что я загружаю изображение в HTML каждые 20 мс.