Изменение изображения холста при наведении курсора

Я действительно борюсь с изменением рисунка на холсте, поэтому я подумал, что увижу, сможет ли кто-нибудь помочь мне здесь или предложить совет.

Я нарисовал статический флаг в холсте, и я также нарисовал развевающийся флаг. Я пытаюсь заставить этот флаг взмахнуть на мыши.

Сначала я думал, что мне нужно будет создать два отдельных файла: один для статического и один для размахивающего аспекта. Затем сохраните каждый из них как изображение jpg/gif, используя window.location = canvas.toDataURL("image/") ;.

Но я только что обнаружил, что вы можете сделать это все в одном файле через jquery/hover. Что кажется намного проще и более эффективным способом сделать это.

Вот код для развевающегося флага:

window.onload = function(){
    var flag = document.getElementById('banglaFlag');
    banglaStatic( flag, 320 );
    var timer = banglaWave( flag, 30, 15, 200, 200 );
};

function banglaStatic( canvas, width ){
//Drawing the Bangladesh flag.

    //Declaring variables that regard width and height of the canvas.
    //Variables C to L are needed for the waving function.
    var a = width / 1.9;
    var b = 200;
    var c = 7*a/13;
    var l = a / 13;
    canvas.width  = b;
    canvas.height = a;
    var ctx = canvas.getContext('2d');
    var radius = 45;




};

function banglaWave( canvas, wavelength, amplitude, period, shading ){

    var fps = 30;
    var ctx = canvas.getContext('2d');
    var   w = canvas.width, h = canvas.height;
    var  od = ctx.getImageData(0,0,w,h).data;
    // var ct = 0, st=new Date;
    return setInterval(function(){
        var id = ctx.getImageData(0,0,w,h);
        var  d = id.data;
        var now = (new Date)/period;
        for (var y=0;y<h;++y){
            var lastO=0,shade=0;
            for (var x=0;x<w;++x){
                var px  = (y*w + x)*4;
                var o   = Math.sin(x/wavelength-now)*amplitude*x/w;
                var opx = ((y+o<<0)*w + x)*4;
                shade   = (o-lastO)*shading;
                d[px  ] = od[opx  ]+shade;
                d[px+1] = od[opx+1]+shade;
                d[px+2] = od[opx+2]+shade;
                d[px+3] = od[opx+3];
                lastO = o;
            }
        }
        ctx.putImageData(id,0,0);
        // if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));
    },1000/fps);
}

Заранее благодарим за любой совет/помощь.