JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas"></canvas>

JavaScript

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
canvas.style.border="1px solid black";
var keypressed=false;
var active=false;
var gravity=0.1;
var keypressed=false;
var boxImage=new Image();

boxImage.src="http://s12.postimg.org/qvhbdq2rd/grass.jpg";
function box(x,y){
   this.x=x;
   this.y=y;
   this.speed=0;
   this.image=boxImage;
   }
   box.prototype.hop=function(){
          if(this.y+this.image.height>canvas.height){
		      this.y=500-36;
			  this.speed=0;
			  }else{
		     
          this.speed=this.speed+gravity;
          this.y+=this.speed;
		  }
   }
  box.prototype.draw=function (){
   
   ctx.drawImage(this.image,this.x,this.y);

}  
 var greenBox=new box(10,450);  
requestAnimationFrame(function loop(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  greenBox.draw();
  if(keypressed==true){
  greenBox.speed=-6;
   keypressed=false;
   
  }
greenBox.hop();

requestAnimationFrame(loop);
});
   
document.addEventListener('keydown',function(e){
       
       if(e.keyCode==38){
	 
	  keypressed=true;

  
	   
	   }
	
	  
	    
},false);