how to move an image on canvas html5 with arrow key press? - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

how to move an image on canvas html5 with arrow key press?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Fabric JS - Issue in Scrollable Div</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.deltalink.it/andreab/fabric/fabric.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {//  w w w.j  ava 2s.  c  om
   border: 1px solid #999;
}
.imp-modal {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index:1002;
   display:block;
   background-color: #FFF;
}
.imp-modal .modal-header {
   position: absolute;
   top: 0;
   height: 50px;
   width: 100%;
   background-color: #f0f0f0;
}
.imp-modal .modal-body {
   position: absolute;
   top: 50px;
   bottom: 50px;
   width: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
.imp-modal .modal-footer {
   position: absolute;
   bottom: 0;
   height: 50px;
   width: 100%;
   background-color: #f0f0f0;
}
.imp-modal .modal-content,
.imp-modal .modal-dialog {
   height: 100%;
   width: 70%;
}
.imp-modal .close {
   opacity: 1;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
//Friend Image
var fReady = false;
var fImage = new Image();
fImage.onload = function(){
      fReady = true;
}
fImage.src="https://www.java2s.com/style/demo/Google-Chrome.png";
var then = 0;

var hero = {
     speed:10,
     x:200,
     y:390
};
var keysDown = {};
addEventListener("keydown", function(e){
        keysDown[e.keyCode] = true;
    e.preventDefault();
}, false);
addEventListener("keyup", function(e){
        delete keysDown[e.keyCode];
         e.preventDefault();
}, false);
function update(modifier){
    if(38 in keysDown){
        hero.y -= hero.speed * modifier;
    }
    if(40 in keysDown){
        hero.y += hero.speed * modifier;
    }
    if(37 in keysDown){
        hero.x -= hero.speed * modifier;
    }
    if(39 in keysDown){
        hero.x += hero.speed * modifier;
    }
}
function render(c){
    c.clearRect(0,0,600,600)
    if(fReady == true){
        c.drawImage(fImage,hero.x,hero.y,100,100);
    }
}
function setImage(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var now = Date.now();
    var delta = now-then;
    update(delta/1000);
    render(ctx);
    then = now;
    requestAnimationFrame(setImage);
}
    var w = window;
    requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
function start(){
    console.log('starting');
    then = Date.now();
    setImage();
}
start();
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myCanvas" width="600" height="600"></canvas>  
   </body>
</html>

Related Tutorials