JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <canvas id="myCanvas" width="600" height="400"> your browser doesnt support canvas technology </canvas>

CSS

canvas{background:#9bc0f8 url('http://s11.postimg.org/9j4xzgu2r/roads.png') 147px 200px repeat-x ; cursor:default }

JavaScript

var width = 100 , height = 93 , frames = 4, i = 9,
 cF = 0,  canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); 
 img1 = new Image() ; img1.src = 'http://s22.postimg.org/chrtkhi41/sprite.png';img2 = new Image() ;  
 img2.src = 'http://img4.imagetitan.com/img4/evw16k2mOcRClkH/13/13_roads.png'; 
 sun = new Image() ;  sun.src = 'http://img4.imagetitan.com/img4/small/13/13_img-thing.png'; 
      x    =    canvas.width/2   ;       y   =    canvas.height/2  ;                    
 
function draw ()  {  
    ctx.clearRect  (  x ,  y  , width , height  )  ; //               fillRect                                    
     ctx.drawImage ( img1 , 0 , width * cF , width , height , x , y , width , height ) ;   
/*          ctx.clearRect  (   8 , 0  , sun.width , sun.height  )  ;                 0 0       */
 if  (  cF ==  frames  )
       {   cF  =   0  ;  }  else  {   cF++;    }  	        
	   i+=5; var  t= i +  "px 195px";   canvas.style.backgroundPosition=  t   ;    
                       }
		setInterval(draw, 120);
     sun.onload = function()   { 
//     ctx.drawImage ( img , sx , sy , swidth , sheight , x , y , width , height  )  ;     
 	   ctx.drawImage ( sun  ,  0  ,  0  ,  180  *  2    ,  180 *  2     ,  0 , 0 ,  180   ,  180   ) ;  
   }