title: Canvas Javascript move triangle keydown event
body: <p>I'm beginner at HTML and JS. I will try to explain what I'm trying to do and show my work so far.</p>
  
  <p>What I'm trying to do is draw a triangle (his name is jack) with a red nose (little triangle) and one eye (little circle). I've to move jack with the keyboard arrows and jack's nose should point to the direction what is moving (like a little arcade game). And in the HTML page there is button when pressed jack comes back to original position (center of canvas, facing up). And, one trick thing, the jack's nose should never left the canvas.</p>
  
  <p>I'm not getting how to work in the rotation position, and keydown what I've set is not working in the HTML. And, for the reset button, should I get some kind of clear function to return Jack to the original position? </p>
  
  <p>Well, so far I've got this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;title&gt;Canvas&lt;/title&gt;
     &lt;script src="a5.js" type="text/javascript" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="setUp()"&gt;
      &lt;h1&gt;The Adventure of Jack the Triangle&lt;/h1&gt;
      &lt;canvas id="myCanvas" height="500" width="500" style="border: 1px solid black"&gt;&lt;/canvas&gt;
  
      &lt;br&gt;
      &lt;button type="button" id="resetbtt" name="button"&gt;Reset&lt;/button&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS:</p>
  
  <pre><code>let canvas;
  let ctx;
  let dx = 10;
  let dy = 10;
  let x = 250;
  let y = 250;
  
  
   function setUp(){
       canvas = document.getElementById("myCanvas");
       ctx = canvas.getContext("2d");
       drawJack();
   }
  
   function drawJack(){
  
       ctx.save();
       ctx.translate(x,y)
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(-50, 50);
       ctx.lineTo(50, 50);
       ctx.closePath();
       ctx.stroke();
       ctx.restore();
  
       //NOSE
       ctx.save();
       ctx.fillStyle = "red";
       ctx.translate(x,y)
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(-10, 10);
       ctx.lineTo(10, 10);
       ctx.closePath();
       ctx.stroke();
       ctx.fill();
       ctx.restore();
  
       //EYE
       ctx.save();
       ctx.fillStyle = "blue";
       ctx.translate(x,y)
       ctx.beginPath();
       ctx.arc(0, 30, 5, 0, 2 * Math.PI);
       ctx.fill();
       ctx.restore();
  }
  
  
  let deltaX = 0;
  let deltaY = 0;
  
  window.addEventListener("keydown", moveJack);
  
  function moveJack(e) {
      switch(e.keyCode) {
          case 37:
              x -= dx;
              break;
          case 38:
              y -= dy;
              break;
          case 39:
              x += dx;
              break;
          case 40:
              y += dy;
              break;
       }
       e.preventDefault();
   }
  </code></pre>