如何解决用户图像的闪烁？

Question

此代码应显示不同的图像，然后每x秒更改一次。每次clearRect之后，画布似乎都会闪烁。我该如何解决它，这样它才能更改图片而不会闪烁一次。

我知道我应该在加载图片之前删除画布，但是我无法同时获取它。

有人可以帮我吗？

我知道它很多多余，但是我需要那样。

var ctx = document.getElementById('c').getContext("2d");
var canvas = ctx.canvas;

var ctx_bg = document.getElementById('background_canvas').getContext("2d");
var bg_canvas = ctx_bg.canvas;

var background = new Image();
background.src = "/dance_bg.png"; 

background.onload = function(){
    ctx_bg.drawImage(background,0,0);   
}

function clear (){
    ctx.clearRect(0, 0, 599, 800);
}

function user_1 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";


        var thisId=0;

        function load_1(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {

                    ctx.drawImage(img, 245, 225, 64, 110);
                }


                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 4){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_1);
}

function user_2 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";


        var thisId=3;

        function load_2(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {

                    ctx.drawImage(img, 210, 265, 64, 110);
                }


                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 4){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_2);
}

function user_3 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";


        var thisId=3;

        function load_3(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {

                    ctx.drawImage(img, 170, 225, 64, 110);
                }


                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 4){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_3);
}

function user_4 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";
        dataArray[4]="https://via.placeholder.com/140x100";


        var thisId=3;

        function load_4(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {      
                    ctx.drawImage(img, 150, 280, 64, 110);
                }

                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 4){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_4);
}

function user_5 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";


        var thisId=3;

        function load_5(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {

                    ctx.drawImage(img, 110, 250, 64, 110);
                }

                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 4){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_5);
}


function user_6 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";

        var thisId=3;

        function load_6(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {

                    ctx.drawImage(img, 80, 300, 64, 110);
                }

                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 4){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_6);
}
function user_7 (user){
        var dataArray=new Array();
        dataArray[0]="https://via.placeholder.com/140x100";
        dataArray[1]="https://via.placeholder.com/140x100";
        dataArray[2]="https://via.placeholder.com/140x100";
        dataArray[3]="https://via.placeholder.com/140x100";
        dataArray[4]="https://via.placeholder.com/140x100";
        dataArray[5]="https://via.placeholder.com/140x100";
        dataArray[6]="https://via.placeholder.com/140x100";
        dataArray[7]="https://via.placeholder.com/140x100";
        dataArray[8]="https://via.placeholder.com/140x100";
        dataArray[9]="https://via.placeholder.com/140x100";
        dataArray[10]="https://via.placeholder.com/140x100";

        var thisId=3;
        function load_7(){
            window.setInterval(function(){
                var img = new Image();
                img.onload = function () {

                    ctx.drawImage(img, 120, 350, 64, 110);
                }
                img.src = dataArray[thisId];
                thisId++;
                if (thisId == 11){
                    thisId = 0;
                }
            },220); 
        }
        requestAnimationFrame(load_7);
}

function clear(){
    window.setInterval(function(){
        ctx.clearRect(0, 0, 599, 800);
    },220);
}
requestAnimationFrame(clear);

var this_js_script = $('script[src*=dance]');
var user_a = this_js_script.attr('data-user_a');  
var user_b = this_js_script.attr('data-user_b'); 
var user_c = this_js_script.attr('data-user_c'); 
var user_d = this_js_script.attr('data-user_d'); 
var user_e = this_js_script.attr('data-user_e'); 
var user_f = this_js_script.attr('data-user_f'); 
var user_g = this_js_script.attr('data-user_g'); 

user_1(user_a);
user_2(user_b);
user_3(user_c);
user_4(user_d);
user_5(user_e);
user_6(user_f);
user_7(user_g);