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=true;
var img=new Image();
img.src="http://s2.postimg.org/5xr35kj45/grass.jpg";
function grass(x,y){
   this.x=x;
   this.y=y;
   this.image=img;
   
}

grass.prototype.draw=function(){
     ctx.drawImage(this.image,this.x,this.y);
}
grass.prototype.hop=function(){
    
   this.y-=200;
 keypressed=false;
}
grass.prototype.fall=function(){
  this.y+=200;
keypressed=true;
  
}
var grass1=new grass(30,450);
grass1.draw();
document.addEventListener('keydown',function(e){
        ctx.clearRect(0,0,canvas.width,canvas.height);
       if(keypressed && e.keyCode=='38'){
	 
	   grass1.hop();

	   
	   }
	   if(grass1.y<0){
	   return false;
	   }else{
	   grass1.draw(grass1.x,grass1.y);
	    }
},false);