JSFiddle - React, Tailwind, and code Playground

HTML

<h2><a id="canvasContainerAnchor">
        <table id="tableOfShapesColors" style="display:none" border="1">
            <tr>
                <td onclick="javascript:drawShapeIcon(16,null,'#ffffff')">szín1</td><td onclick="javascript:drawShapeIcon(16,null,'#111fff')">szín2</td><td onclick="javascript:drawShapeIcon(16,null,'#000000')">szín3</td><td onclick="javascript:drawShapeIcon(16,null,'#ff99cc')">szín4</td>
            </tr>
            <tr>
                <td onclick="javascript:drawShapeIcon(16,null,'#ffff00')">szín5</td><td onclick="javascript:drawShapeIcon(16,null,'#008080')">szín6</td><td onclick="javascript:drawShapeIcon(16,null,'#ff0000')">szín7</td><td onclick="javascript:drawShapeIcon(16,null,'#00ff00')">szín8</td>
            </tr>
            <tr>
                <td onclick="javascript:drawShapeIcon(16,1)">alak1</td><td onclick="javascript:drawShapeIcon(16,2)">alak2</td><td onclick="javascript:drawShapeIcon(16,3)">alak3</td><td onclick="javascript:drawShapeIcon(16,4)">alak4</td>
            </tr>
        </table>
        </a>hello<button id="OKButton" style="display:none" onclick="document.getElementById('tableOfShapesColors').style.display = 'none'; document.getElementById('ChooseButton').style.display = '';document.getElementById('OKButton').style.display = 'none';">
            OK
        </button>
        <button id="ChooseButton" onclick="document.getElementById('tableOfShapesColors').style.display = ''; document.getElementById('ChooseButton').style.display = 'none';document.getElementById('OKButton').style.display = '';">
            Choose
        </button></h2>

JavaScript

function drawShapeIcon(size, shape, color) {
    var canvasIcon, context, canvasContainerAnchor = document.getElementById('canvasContainerAnchor');
    if (shape) {
        canvasContainerAnchor.setAttribute('data-shape', shape);
    }
    if (color) {
        canvasContainerAnchor.setAttribute('data-color', color);
    }
    if (!canvasContainerAnchor.getAttribute('data-color')) {
        color = "#ffffff";
    } else {
        color = canvasContainerAnchor.getAttribute('data-color');
    }

    if (!canvasContainerAnchor.getAttribute('data-shape')) {
        shape = 1;
    } else {
        shape = Number(canvasContainerAnchor.getAttribute('data-shape'));
    }
    //if (!node) {
    if (!canvasContainerAnchor.getElementsByTagName('canvas')[0]) {
        canvasIcon = document.createElement('canvas');
        document.getElementById('canvasContainerAnchor').appendChild(canvasIcon);
        //set size
        canvasIcon.width = size;
        //size
        canvasIcon.height = size;
        //size
    } else {
        //canvasIcon = node;
        canvasIcon = canvasContainerAnchor.getElementsByTagName('canvas')[0];
    }

    context = canvasIcon.getContext('2d');

    canvasIcon.width = canvasIcon.width;

    //set shape
    //1: rectangle, 2: triangle, 3: circle, 4: diamond
    switch (shape) {
    case 1:
        //rectangle
        context.beginPath();
        context.fillStyle = color;
        context.moveTo(canvasIcon.width / 2 - size / 2, canvasIcon.height / 2 - size / 2);
        context.lineTo(canvasIcon.width / 2 + size / 2, canvasIcon.height / 2 - size / 2);
        context.lineTo(canvasIcon.width / 2 + size / 2, canvasIcon.height / 2 + size / 2);
        context.lineTo(canvasIcon.width / 2 - size / 2, canvasIcon.height / 2 + size / 2);
        context.fill();
        context.closePath();
        break;
    case 2:
        //triangle
        context.beginPath();
        context.moveTo(canvasIcon.width / 2, canvasIcon.height / 2 - size / 2);
       ...