title: Javascript script doesn't load in HTML
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Breakout&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;canvas width="900" height="450" class="canvas"&gt;&lt;/canvas&gt;
  
      &lt;script src="scripts/base.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the index file</p>
  
  <pre><code>*{
    margin: 0;
    padding: 0;
  }
  
  .canvas{
    background-color: #b7b7b7;
  }
  </code></pre>
  
  <p>This is the CSS file</p>
  
  <pre><code>var canvas = document.getElementsByClassName('canvas');
  var context = canvas.getContext('2d');
  
  context.beginPath();
  
  context.drawRect(20,30,50,40);
  context.fillStyle("#0022ff");
  context.fill();
  
  context.endPath();
  </code></pre>
  
  <p>And the javascript file.
  I am trying to create a breakout game and I am following a tutorial from udemy. Unfortunately, it seems there is something wrong with this code, but I don't know what. I verified the code one thousand times and I haven't found anything.</p>