Изменить анимацию развевающегося флага

Надо повернуть 
transform: rotate(-270deg);
и отразить по горизонтали

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

У вас флаг какой-то неправильный. Зеркальное отражение американского.

Конечно, можно. Типа так:

var h = new Image;
h.crossOrigin = "Anonymous";
h.onload = function(){
  var flag = document.getElementById('flag');
  var amp = 10;
  flag.width  = h.width + amp*2;
  flag.height = h.height;
  flag.getContext('2d').drawImage(h,amp,0,h.width,h.height);
  var timer = waveFlag( flag, h.height/10, amp, 300 );
};
h.src = 'https://i.ibb.co/PwVdv4N/Vertical-United-States-Flag-svg.png';

function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){
  if (!squeeze)    squeeze    = 0;
  if (!shading)    shading    = 100;
  if (!period)     period     = 200;
  if (!amplitude)  amplitude  = 10;
  if (!wavelength) wavelength = canvas.height/10;

  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;
      var sq = (y - h / 2) * squeeze;
      for (var x = 0; x < w; ++x) {
        var px = (y * w + x) * 4;
        var pct = y / h;
        var o = Math.sin(y / wavelength - now) * amplitude * pct;
        var x2 = x + (o + sq * pct) << 0;
        var opx = (y * w + x2) * 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);
}

О, спасибо большое!!