title: Trouble Displaying Canvas in Basic HTML Canvas Game
body: <p>I am trying to create a basic HTML game using the Canvas element, but I am having trouble with it. Unfortunately, I don't know where the error is in my code, so I have posted the entirety of the document I'm working on below.</p>
  
  <p>My problem: The canvas is not displaying when I run the HTML document.</p>
  
  <p>This code's based off of (as in it pretty much is) the Movement tutorial from w3schools for using the Canvas, available at <a href="https://www.w3schools.com/graphics/tryit.asp?filename=trygame_movement_keyboard" rel="nofollow noreferrer">https://www.w3schools.com/graphics/tryit.asp?filename=trygame_movement_keyboard</a>, but when chaing variable names I must've broken something, because after looking at this for hours I can't figure out what I'm missing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  &lt;style&gt;
    canvas {
      border:1px solid #d3d3d3;
      background-color: #f1f1f1;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload = "initial()"&gt;
  
  &lt;script&gt;
  var playerOne;
  
  function initial() {
    playerOne = new canvasObject(30, 30, "red", 225, 225);
    gameArea.start();
  }
  
  var gameArea = {
    canvas : document.createElement("canvas");
    start : function() {
      this.canvas.width = 480;
      this.canvas.height = 270;
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.frameNo = 0;
      this.interval = setInterval(updateGameArea, 20);
      window.addEventListener('keydown', function (e) {
          e.preventDefault();
          gameArea.keys = (gameArea.keys || []);
          gameArea.keys[e.keyCode] = (e.type == "keydown");
      })
      window.addEventListener('keyup', function (e) {
          gameArea.keys[e.keyCode] = (e.type == "keydown");
      })
    },
    stop : function() {
        clearInterval(this.interval);
    },    
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
  }
  
  function canvasObject(width, height, color, x, y, type)
  {
   this.type = type;
    this.width = width;
    this.height = height;
    this.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
      ctx = gameArea.context;
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.angle);
      ctx.fillStyle = color;
      ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
      ctx.restore();    
    }
    this.newPos = function() {
     this.angle += this.moveAngle * Math.PI / 180;
      this.x += this.speed * Math.sin(this.angle);
      this.y -= this.speed * Math.cos(this.angle);
    }
  }
  
  function updateGameArea() {
    gameArea.clear();
    playerOne.moveAngle = 0;
    playerOne.speed = 0;
    if (gameArea.keys &amp;&amp; gameArea.keys[37]) {
     playerOne.moveAngle = -1; 
    }
    if (gameArea.keys &amp;&amp; gameArea.keys[39]) {
     playerOne.moveAngle = 1; 
     
    }
    if (gameArea.keys &amp;&amp; gameArea.keys[38]) {
     playerOne.speed= 1; 
     
    }
    if (gameArea.keys &amp;&amp; gameArea.keys[40]) {
     playerOne.speed= -1; 
     
    }
    playerOne.newPos();
    playerOne.update();
  }
  
  &lt;/script&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>