title: Dynamically add text on HTML5 canvas
body: <p>I am creating a basic raster graphics editor app (just started) and I am having trouble adding text dynamically to the canvas.</p>
  
  <p>The app has 2 divisions. Left side is tool box, Right side is the editor canvas.</p>
  
  <p>The user will select a tool from the left side (Add text button), and then click anywhere on the canvas to add text (why children canvas inside parent canvas? well I want the main canvas to have multiple canvas for text shapes images etc, since a single canvas can't hold multiple context).</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="app"&gt;
      &lt;aside class="app__tools"&gt;
          &lt;button class="btn tools__btn tools__text"&gt;Add Text&lt;/button&gt;
      &lt;/aside&gt;
  
      &lt;canvas class="app__drawing-board"&gt;
  
      &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Selecting Toolbox JavaScript (Works fine):</p>
  
  <pre><code>// TOOLBOX
  const buttons = document.querySelectorAll('.tools__btn');
  
  let button_selected = false;
  
  for (let i=0; i&lt;buttons.length; i++) {
      buttons[i].addEventListener('click', e =&gt; {
          console.log('BUTTON: clicked');
          console.log('button selected', button_selected);
  
          const attributes = e.target.getAttribute('class').split(' ');
          const selected = attributes.filter(className =&gt; className === 'selected').length === 0;
  
          console.log('selected', selected);
          button_selected = selected;
  
          if (selected) attributes.push('selected');
          else attributes.splice(-1, 1);
  
          e.target.setAttribute('class', attributes.join(' '));
      });
  }
  </code></pre>
  
  <p>Hovering over canvas when tool button is selected (Works fine): </p>
  
  <pre><code>// CANVAS 
  const canvas = document.getElementsByClassName('app__drawing-board')[0];
  
  canvas.addEventListener('mouseover', e =&gt; {
      console.log('CANVAS: mouseover');
      console.log('button selected', button_selected);
  
      e.target.style.cursor = button_selected? 'text' : 'auto';
  });
  </code></pre>
  
  <p>Adding text to the canvas (Failing Here): </p>
  
  <pre><code>canvas.addEventListener('click', e =&gt; {
      if (button_selected) {
          console.log('CANVAS: clicked');
          console.log(e);
  
          const text_canvas = document.createElement('canvas');
          const context = text_canvas.getContext('2d');
  
          text_canvas.class = 'drawing-board__text';
  
          context.font = '40pt Calibri';
          context.fillText('Hello World', e.pageX, e.pageY);
  
          canvas.appendChild(text_canvas);
          console.log(context);
      }
  });
  </code></pre>
  
  <p>After clicking the canvas, my result is as:</p>
  
  <pre><code>&lt;canvas class="app__drawing-board"&gt;
      &lt;canvas&gt;
      "
  
              "
      &lt;/canvas&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>Even though, context prints:</p>
  
  <pre><code>CanvasRenderingContext2D {canvas: canvas, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}
  </code></pre>
  
  <p>Codepen: <a href="https://codepen.io/danyal-imran/pen/WPQmvy" rel="nofollow noreferrer">https://codepen.io/danyal-imran/pen/WPQmvy</a></p>