JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id="canvas" width="0px" height="0px">
	
</canvas>
    
</body>

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; background:#0CF;} /* To remove the scrollbars */

JavaScript

var canvas, context, docWidth, docHeight;

	window.onload = function(){
		docWidth = window.innerWidth;
		docHeight =  window.innerHeight;
		canvas = document.getElementById('canvas');
		context = canvas.getContext('2d');
		resizeCanvas(docWidth, docHeight);
        
        var cloud1 = new Cloud(0, 10, docWidth, docHeight, 'http://corkeynet.com/test/images/cloud1.png', 3, 24);
		var cloud2 = new Cloud(400, 10, docWidth, docHeight, 'http://corkeynet.com/test/images/cloud2.png', 5, 24);
		var cloud3 = new Cloud(160, 10, docWidth, docHeight, 'http://corkeynet.com/test/images/cloud3.png', 1, 24);
		var clouds = [cloud1, cloud2, cloud3];
		drawCloud(clouds, docWidth, docHeight);
	}
	window.onresize = function(){
		docWidth = window.innerWidth;
		docHeight =  window.innerHeight
		resizeCanvas(docWidth, docHeight);
		drawCloud(0, 0, docWidth, docHeight);
	}
	
	function resizeCanvas(width, height){        
		canvas.width = docWidth;
		canvas.height = docHeight;
	}

function drawCloud(clouds, width, height){
		var img;
		var arrLength = clouds.length;
		
			context.save();
			context.clearRect(0,0,width,height);
			for(var i=0; i<arrLength; i++){
				var cloud = clouds[i];
				img = new Image();
				img.src = cloud.getFilename();
				imageWidth = img.naturalWidth;
				imageHeight = img.naturalHeight;
				context.drawImage(img, cloud.getX()-imageWidth, cloud.getY());
				clouds[i].moveCloud(imageWidth);
			}
			
			context.restore();

    var loopTimer = setTimeout(function() {drawCloud(clouds,width,height)},24);
			
	}
	
	function Cloud (x, y, width, height, filename, velocity, rate) {
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
		this.filename = filename;
		this.velocity = velocity;
		this.rate = rate;
	}
	
	Cloud.prototype = {
		constructor:Cloud,
		moveCloud:function(imageWidth){
			if(this.x >= this.width+imageWidth){
				this.x=0-imageWidth/2;
			} else {
				this.x += this.velocity;
			}
		},
		getFilename:function(){
			return...