Html5 Canvas "Reloaden" ohne "image" neu zu Laden? Image zwischen speichern?

[gixnetwork]

Hallo Liebe Profis,

Ich habe einen Code an den ich gebunden bin.
Alle (zb. 5 Sekunden ) Lade Ich das Canvas Neu, Sprich Löschen und Neu Zeichen....

Wenn bilder (.gif) Neu geladen werden Blinke diese immer auf...

Das Bild soll nicht flackern oder blinken aber trozdem Aktualisiert werden

    function draw(result) {
       
        var c = document.getElementById("canvas");
        var inst = c.getContext("2d");
       
// Zeichnung Gesamte fläche / Breite Höhe
        c.width  = 400;
        c.height = 400;

   
// Funktion (Zeichnung Löschen) 
        inst.save();
        inst.clearRect (0,0, c.width, c.height); 


var data = [2300]; 


for(var i=0; i<data.length; i++) { 
    var dp = data[i]; 
  inst.fillRect(40 + i*100, 220-dp, 30, 3);  
} 

var imageObj = new Image();
       
imageObj.onload = function() {
        inst.drawImage(imageObj, 53, 209-dp );
};
    imageObj.src = '../gif/snow-2.gif';      
       
}

getWetter()

setInterval(function(){ getWetter() }, 5000);

Hier ist das Original Problem https://wetter-erzenholz.ch/test/instrumente.php (DIE SCHNEEFLOCKE)

Wie könnte ich das lösen?
Habe so versucht http://stackoverflow.com/questions/...-250ms-without-flickering-between-each-redraw

Aber geht nicht... weill...

    function draw(result) {
      
        var c = document.getElementById("canvas");
        var inst = c.getContext("2d");
      
// Zeichnung Gesamte fläche / Breite Höhe
        c.width  = 400;
        c.height = 400;

  
// Funktion (Zeichnung Löschen)
        inst.save();
        inst.clearRect (0,0, c.width, c.height);

UND

}

getWetter()

setInterval(function(){ getWetter() }, 5000);

kann / darf ich nichts ändern da es von anderen elementen benötigt wird, ich ich ausgebaut habe zur besseren übersicht.

es sind noch weitere bilder geplant.. wenn's nicht flackern würde

Freundliche grüsse aus Frauenfeld - Schweiz