JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<h2><a id="canvasContainerAnchor">
        <table id="tableOfShapesColors" border="1">
            <tr>
                <td onclick="javascript:drawShapeIcon(16,null,'#ffff00')">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,'#ccffff')">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>
        <button id="OKButton" onclick="document.getElementById('tableOfShapesColors').style.display = 'none'; document.getElementById('ChooseButton').style.display = '';document.getElementById('OKButton').style.display = 'none';">
            OK
        </button>
        <button id="ChooseButton" style="display:none" onclick="document.getElementById('tableOfShapesColors').style.display = ''; document.getElementById('ChooseButton').style.display = 'none';document.getElementById('OKButton').style.display = '';">
            Choose
        </button></a>hello</h2>

JavaScript

function drawShapeIcon(size, shape, color, node) {
                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') && 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');
                    color = canvasContainerAnchor.getAttribute('data-color');
                    shape = Number(canvasContainerAnchor.getAttribute('data-shape'));
                    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,...