<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x1=0;
var x2=0;
var y1=256;
var y2=0;
var step=6;
can1.setAttribute("width",ww);
can1.setAttribute("height",wh);
img.src="https://opengameart.org/sites/default/files/platformer_sprites_base.png";
img.addEventListener("load",function(){
ctx.drawImage(img,0,512,64,64,x2,y2,64,64);
document.addEventListener('keydown', function(event){
if(event.keyCode==39){
if(x1>448){x1=0};
if(x2>ww){x2=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,64,64,x2,y2,64,64);
x1=x1+64;
x2=x2+step;
};
if(event.keyCode==37){
if(x1>448){x1=0};
if(x2>ww){x2=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,64,64,x2,y2,64,64);
x1=x1+64;
x2=x2-step;
};
});
},false);
</script>
</body>
</html>
