Как перерисовывать холст (каждые 250 мс) без мерцания между каждой перерисовкой?

Я написал функцию, которая вытягивает кусок пиццы в зависимости от того, какой размер вы указали (в градусах)

function drawProgress(degs){

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

context.globalAlpha=1;                
var img = new Image();
img.onload = function(){

    context.beginPath();
    context.arc(canvas.width/2,canvas.height/2, canvas.height/2, 0, degs * (-Math.PI/180), true);
    context.lineTo(canvas.width/2, canvas.height/2);
    context.clip();                        
    context.drawImage(img, 0, 0, canvas.width,canvas.width);
}                           
img.src = 'pizza.png';

}

Когда я пытаюсь вызывать эту функцию каждые 250 мс, прогресс не обновляется после первого розыгрыша.

function runsEvery250ms(percent){
    drawProgress(3.6 * percent);
}

Какие изменения мне нужно внести в код, чтобы холст перерисовывался каждый раз, когда вызывается drawProgress(degs)? Можно ли выполнять перерисовку без мерцания пиццы?