kamlauka

const images = [
  {
    src: 'https://i.imgur.com/GigS3KR.png',
    translate: [ 50, 50, 500, 20 ],
    rotate: [ 340, 200 ],
    draw: [ 0, 0, 0.95 ],
  },
  {
    src: 'https://i.imgur.com/y3JAe69.png',
    translate: [ 5, 0, 382, 2 ],
    rotate: [ 630, 40 ],
    draw: [ 150, 100, 0.84 ],
  },
  {
    src: 'https://i.imgur.com/v30JIWp.png',
    translate: [ 8, 150, 198, 3 ],
    rotate: [ 500, 450 ],
    draw: [ 0, 0, 0.7 ],
  },
].map(n => {
  n.draw.unshift(new Image);
  n.draw[0].src = n.src;
  return n;
});

const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;

for (const n of canvases) {
  n.setAttribute('width', canvasSize);
  n.setAttribute('height', canvasSize);
}

let ts0;
window.requestAnimationFrame(function draw(ts) {
  for (const n of canvases) {
    ts0 = ts0 || ts;
    const dt = ts - ts0;

    const ctx = n.getContext('2d');
    ctx.clearRect(0, 0, canvasSize, canvasSize);

    for (const { translate: t, rotate: r, draw: d } of images) {
      ctx.save();
      ctx.translate(t[0], t[1] + Math.sin(dt / t[2]) / t[3]);
      ctx.rotate(Math.sin(dt / r[0]) / r[1]);
      ctx.drawImage(d[0], d[1], d[2], canvasSize * d[3], canvasSize * d[3]);
      ctx.restore();
    }
  }

  window.requestAnimationFrame(draw);
});

Ну как бы так:

const cloud = new Image();
cloud.src = 'https://avatanplus.com/files/resources/mid/56dc1ba4ba1b81534bcbfb9a.png';

(function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(300, 200);

  const time = new Date();
  ctx.rotate(Math.sin(time / 500) / 10);

  ctx.drawImage(cloud, -300, -200);
  ctx.restore();

  window.requestAnimationFrame(draw);
})();

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

Можно угол поворота сделать функцией синуса от прошедшего времени. Примерно так:

var ts0;
function draw(ts) {
    // ...
    if(!ts0) ts0 = ts;
    const dt = ts - ts0; // сколько прошло миллисекунд
    //  ...
    ctx.translate(500, 180 + Math.sin(dt/352)*3); 
    ctx.rotate( Math.sin(dt/630) / 40 );

Тут помимо поворота ещё по вертикали слегка покачивается. Так же, плавной синусоидой, но с другим периодом, чтобы не выглядело циклично.

Рабочий пример.

В функцию, вызываемую по requestAnimationFrame() параметром передаётся текущее время, так что можно не заморачиваться с созданием нового объекта Date, а использовать этот параметр.

Из соотношения координат в ctx.drawImage(cloud, -350, -250); с размерами картинки определяется центр, относительно которого получится вращение. Желательно его подобрать так, чтобы они приходился на визуальный центр масс тучи.