how to make an object (image) smoothly move around a canvas with arrow keys or WASD?

Question

I'm trying to make a .io game in HTML5 canvas and I'm trying to make the character which is a png move around smoothly with the WASD keys and I've found tutorials on how to do it but it's extremely jagged and rigid and it doesn't flow around when you press the keys. does anyone know how I can do this or where I can learn how to do this? I'm also using a node.js for this as well. if you click on the play button then the canvas will show up.

var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

console.log(canvas);



var image = new Image();
image.src = 'client/img/pp.png';     // starts to load the image
image.addEventListener("load", () => {
    ctx.drawImage(image, 100, 100, 75, 75); // image has loaded and can be drawn
}, {once: true})

function myFunction() {
    document.getElementById('container').style.opacity = "0";
    setTimeout(func2, 650) 

}

function func2() {
        document.getElementById('canvas-container').style.display = "block";

}

body {
    margin: 0;
    padding: 0;
    background-image: url(trianglebg.png);
    background-size: 475px;
    background-color: rgb(245, 245, 245);
    overflow: hidden;
}

#container {
  transition: 0.6s;
  width: 100vw;
}

#canvas-container {
 display: none;
}

#canvas {
  
}



@font-face {
    font-family: 'coconbold';
    src: url(Cocon-Bold-Font.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'coconregular';
    src: url(cocon-regular.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'coconlight';
    src: url(cocon-light.ttf);
    font-style: normal;
    font-weight: 100;
}

#outer {
  text-align: center;
  position: absolute;

  margin: 0;
  padding: 0;
  color: black;
  font-size: 7rem;
  font-family: coconbold;
  font-weight: 100;
  transform: translateX(-50%);
  -webkit-text-stroke: 20px black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#inner {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  position: absolute;

  margin: 0;
  padding: 0;
  font-family: coconbold;
  font-weight: 100;
  transform: translateX(-50%);
  font-size: 7rem;
  background: linear-gradient(45deg, rgba(255, 40, 40, 1) 15%, rgba(255, 121, 4, 1) 27%, rgba(252, 241, 73, 1) 40%, rgba(82, 252, 73, 1) 50%, rgba(73, 197, 252, 1) 60%, rgba(106, 53, 255, 1) 73%, rgba(150, 0, 214, 1) 85%);
  background-size: 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: anim 4s linear infinite alternate;
}

@keyframes anim {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100%;
  }
}

#nickname {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 40%;
  left: 50%;
  margin: 0;
  padding: 3px 10px 0 9px;
  transform: translateX(-50%);
  width: 30%;
  height: 8%;
  outline: none;
  font-size: 50px;
  font-weight: 1px;
  border-color: lightgrey;
  background-color: rgb(247, 247, 247);
  border-width: 1px;
  font-family: coconbold;
  border-style: solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  caret-color: grey;
  animation-name: float-up-3;
  animation-duration: 2s;
}

input::placeholder {
  color: transparent;
}

#spawnif {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 36%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: coconbold;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 6px black;
  animation-name: float-up-2;
  animation-duration: 2s;
}

#spawnifin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 36%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: coconbold;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
      animation-name: float-up-2;
  animation-duration: 2s;
}

#playbtnin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  width: 215px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: 3px;
  outline: none;
      animation-name: float-up-1;
  animation-duration: 2s;
}

#playbtnot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  width: 215px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  background-color: rgb(180, 179, 255);
  border-color: rgb(110, 107, 255);
  background-size: 500px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-style: solid;
  border-width: 3px;
  outline: none;
    animation-name: float-up-1;
  animation-duration: 2s;
  -webkit-text-stroke: 6px black;
}

#playbtn:hover {
  background-color: rgb(161, 171, 255);
  border-color: rgb(103, 101, 255);
}

.ctr {
  position: absolute;
  top: 15%;
  left: 50%;
  animation-name: float-in;
  animation-duration: 2s;
}

@keyframes float-in {
  from {
    top: -50%;
  }
  to {
    top: 15%;
  }
}

@keyframes float-up-1 {
  from {
    top: 150%;
  }
  to {
    top: 50%;
  }
}

@keyframes float-up-2 {
  from {
    top: 140%;
  }
  to {
    top: 36%;
  }
}

@keyframes float-up-3 {
  from {
    top: 150%;
  }
  to {
    top: 40%;
  }
}

  #changeot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 10px;
    left: 7%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 33px;
    font-family: coconbold;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }

  #changein {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 10px;
    left: 7%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 33px;
    font-family: coconbold;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #lastupin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 48px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 18px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #lastupot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 48px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 18px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }
  
  #toppin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 90px;
    left: 13%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 13px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #toppot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 90px;
    left: 13%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 13px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 4px black;   
  }

  #midpin {
    box-align: center;
    position: absolute;
    font-size: 13px;
    border-radius: 90px;
    top: 150px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #midpot {
    box-align: center;
    position: absolute;
    font-size: 13px;
    border-radius: 130px;
    top: 150px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 4px black;   
  }
  
  #versionnumin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 635px;
    left: 11.25%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 24px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #versionnumot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 635px;
    left: 11.25%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 24px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }

    #rbtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1150px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(253, 135, 106);
    border-color: rgb(255, 31, 2);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  #dbtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1210px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(189, 204, 255);
    border-color: rgb(109, 112, 255);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  #ibtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1270px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(165, 117, 255);
    border-color: rgb(120, 2, 255);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  
  #tbtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1330px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(148, 207, 255);
    border-color: rgb(0, 110, 255);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  #cinfoin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 12px;
    right: -6%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 25px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #cinfoot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 12px;
    right: -6%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 25px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }

  #mgbtnot {
    box-align: center;
    position: absolute;
    border-radius: 25px;
    width: 150px;
    height: 40px;
    top: 7px;
    left: 1095px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 19px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(159, 255, 151);
    border-color: rgb(61, 167, 57);
    border-style: solid;
    border-width: 3px;
    outline: none;
    -webkit-text-stroke: 4px black;   
  }

  #mgbtnin {
    box-align: center;
    position: absolute;
    border-radius: 25px;
    width: 150px;
    height: 40px;
    top: 7px;
    left: 1095px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 19px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: transparent;
    border-color:transparent;
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>rainboz.io</title>
        <link rel="stylesheet" href='client/styles/main.css' type="text/css">
        <div id="canvas-container"> <!-- Canvas container outside of container div -->
            <canvas id='canvas'></canvas> 
         
        </div>
        <script src='client/js/script.js'></script>
        <script src='https://cdn.socket.io/socket.io-1.4.5.js'></script>
    </head>
    <body>
        <!--title-->
        <div id="container">
        <!--changelog-->
        <h2 id='changeot'>Changelog</h2>
        <h2 id="changein">Changelog</h2>

        <!--last upadated-->
        <h2 id='lastupot'>Last Updated: June 22, 2020</h2>
        <h2 id="lastupin">Last Updated: June 22, 2020</h2>
        
        <!--upadates-->
        <p id='toppot'>
            - I just created this changelog,<br/>
            this is where chages will go whenever I make them but <br/>
            I dont have any yet.

        </p>
        <p id='toppin'>
            - I just created this changelog,<br/>
            this is where chages will go whenever I make them but <br/>
            I dont have any yet.

        </p>

        <!--updates 2-->

        <p id='midpot'>
            - I barely even know how to code at all,<br/>
            so I'm kinda just winging it for now <br/>
            I'll just look up how to do stuff as I go.

        </p>

        <p id='midpin'>
            - I barely even know how to code at all,<br/>
            so I'm kinda just winging it for now <br/>
            I'll just look up how to do stuff as I go.
        </p>

        <h2 id="versionnumot">Version Number: 01.03.02</h2> 
        <h2 id='versionnumin'>Version Number: 01.03.02</h2>

        <h2 id='cinfoot'>Contact | About</h2>
        <h2 id='cinfoin'>Contact | About</h2>

        <!--nickname and play button-->

        <div class='ctr'>
          <h1 id='outer'>rainboz.io</h1>
          <h1 id='inner'>rainboz.io</h1>
        </div>
        
        
        <div>
         
            <label id='spawnif'>this is the story of...</label>
            <label id='spawnifin'>this is the story of...</label>
            <input type='text' spellcheck='false' maxlength="20" autocomplete="off" id='nickname' placeholder="Nickname">
            <button id='playbtnot' onclick="myFunction()">Play</button>
            <button id='playbtnin' onclick="myFunction()">Play</button>
          
        </div>

       <form>
            <button id='rbtn'></button>
            <button id='dbtn'></button>
            <button id='ibtn'></button>
            <button id='tbtn'></button>
        </form>

            <button id='mgbtnot'>More Games</button>
            <button id='mgbtnin'>More Games</button>
            
         
    </div>

    </body>
</html>

Answer 1

You can do so by using a setInterval() function and use key codes to assign roles to WASD keys.

Here, I created a simple program on canvas where a square moves to left when press 'D' on keyboard. You get the key codes for the keys from https://keycode.info/

let ctx = canvas.getContext('2d')

let x = 50
let y = 50

ctx.fillRect(x, 50, 50, 50)

window.addEventListener('keydown', function(e) {
    if (e.keyCode == 68) {
        ctx.clearRect(0, 0, 500, 500)
        x++
        ctx.fillRect(x, 50, 50, 50)
    }
}, true)