title: Text on HTML Canvas is only showing when page is reloaded
body: <p>I have the following code</p>
  <pre class="lang-js prettyprint-override"><code>    public draw() : void
      {
          const x : number = this.ctx.canvas.width * this.x_percentage;
          const y : number = this.ctx.canvas.height * this.y_percentage;
          const width : number = this.ctx.canvas.width * this.width_percentage;
          const height : number = this.ctx.canvas.height * this.height_percentage;
          const text_margin : number = 10;
  
          this.ctx.font = &quot;7vh &quot; + this.font_name;
          this.ctx.textAlign=&quot;center&quot;; 
          this.ctx.textBaseline = &quot;middle&quot;;
          this.ctx.fillStyle = this.fill_color;
          this.ctx.fillRect(x, y, width, height);
          this.ctx.fillStyle = this.text_color;
          this.ctx.fillText(this.text, x + width / 2, y + height / 2, width - text_margin); 
      }
  </code></pre>
  <p>This code is being called every frame, however, the text isn't appearing until I manually reload the page. What could be causing <a href="https://i.imgur.com/XVQlSWU.gif" rel="nofollow noreferrer">this</a> behavior?</p>