title: When creating canvases in JS and drawing text, text is overwitten when creating more
body: <p>I am trying to create a program where a user fills in the fields and a "post" (a canvas with text written on it) is displayed.</p>
  
  <p>So far, I have successfully managed to create the canvas but filling it in with text is the problem.</p>
  
  <p>There is a separate function in the ES6 Class to add the text to the canvas.</p>
  
  <p>I also have a function which creates a new "Post" and displays text on it.</p>
  
  <p>I am using that function to test the program however the text is overwritten on top of the other text on the first canvas created.</p>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>var body = document.getElementsByTagName("body")[0];
  
  class Post {
      constructor(height, width, user) {
          this.height = height;
          this.width = width;
          this.user = user;
          let canvas = document.createElement('canvas');
          canvas.height = this.height;
          canvas.width = this.width;
          body.appendChild(canvas);
      }
      addText(text, color) {
          let canvas = document.getElementById(this.id);
          let contextCanvas = canvas.getContext('2d');
          contextCanvas.fillStyle = color;
          contextCanvas.fillText(text + " by " + this.user, 5, 30);
      }
      addBreak() {
          let br = document.createElement("br");
          body.appendChild(br);
      }
  };
  
  var createBox = async (textP, userP) =&gt; {
      let text = textP;
      let user = userP;
      let textColor = "black";
  
      let boxCreate = new Post(200, 200, user);
      boxCreate.addText(text, textColor);
      boxCreate.addBreak();
  }
  
  //drawPosts();
  
  createBox("hi", "i am one.");
  createBox("hello", "i am two.");
  createBox("hey", "i am three.");
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Document&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="script.js"&gt;
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS to highlight the canvases:</p>
  
  <pre><code>canvas  {
      border: 5px solid black;
  }
  </code></pre>
  
  <p>Thanks for the help.</p>