title: i am getting an error of cannot read property'get context' of null
body: <pre><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&gt;
  &lt;canvas id="GameArea"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  
  var myGamePiece;
  
   myGamePiece = new component(30, 30, "red", 10, 120);
  
  
  
  
  function component(width, height, color, x, y) {
      console.log("component  called");
      this.width = width;
      this.height = height;
      this.x = x;
      this.y = y; 
     var  myGameArea=document.getElementById("startGame"); 
     console.log("myGameArea");  
      var ctx = myGameArea.getContext("2d");
      console.log("crossed");
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  
  &lt;/script&gt;
  
  &lt;p&gt;We have added a component to our game, a red square!&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>//not able to getout of my error
  in the above code i tried to create a rectangle on calling some function named component.
  it created a rectangle by context but i am getting a error</p>