Динамически добавлять текст на холсте HTML5

Question

Я создаю базовое приложение для работы с растровой графикой (только началось), и у меня возникают проблемы с динамическим добавлением текста на холст.

Приложение имеет 2 подразделения. Левая сторона - ящик для инструментов, Правая сторона - холст редактора.

Пользователь выберет инструмент с левой стороны (кнопка «Добавить текст»), а затем щелкните в любом месте холста, чтобы добавить текст (почему дочерний холст внутри родительского холста? Хорошо, я хочу, чтобы на главном холсте было несколько холстов для текстовых фигур. изображения и т. д., поскольку один холст не может содержать несколько контекстов).

HTML:

<div class="app">
    <aside class="app__tools">
        <button class="btn tools__btn tools__text">Add Text</button>
    </aside>

    <canvas class="app__drawing-board">

    </canvas>
</div>

Выбор панели инструментов JavaScript (работает нормально):

// TOOLBOX
const buttons = document.querySelectorAll('.tools__btn');

let button_selected = false;

for (let i=0; i<buttons.length; i++) {
    buttons[i].addEventListener('click', e => {
        console.log('BUTTON: clicked');
        console.log('button selected', button_selected);

        const attributes = e.target.getAttribute('class').split(' ');
        const selected = attributes.filter(className => 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(' '));
    });
}

При наведении курсора на холст, когда нажата кнопка инструмента (Работает нормально):

// CANVAS 
const canvas = document.getElementsByClassName('app__drawing-board')[0];

canvas.addEventListener('mouseover', e => {
    console.log('CANVAS: mouseover');
    console.log('button selected', button_selected);

    e.target.style.cursor = button_selected? 'text' : 'auto';
});

Добавление текста на холст (в противном случае):

canvas.addEventListener('click', e => {
    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);
    }
});

После нажатия на холст мой результат выглядит так:

<canvas class="app__drawing-board">
    <canvas>
    "

            "
    </canvas>
</canvas>

Несмотря на то, что контекст печатает:

CanvasRenderingContext2D {canvas: canvas, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}

Codepen: https://codepen.io/danyal-imran/pen/WPQmvy