JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<h2><a id="canvasContainerDiv"></a>hello</h2>
<!-- relatív alakok, középre mennek!! -->

JavaScript

function drawShapeIcon(size, shape, color) {
            var canvasIcon = document.createElement('canvas');
            var context = canvasIcon.getContext('2d');
            document.getElementById('canvasContainerDiv').appendChild(canvasIcon);

            //set size
            canvasIcon.width = 16;
            //size
            canvasIcon.height = 16;
            //size

            //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);
                    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.fillStyle = color;
                    context.fill();
                    context.closePath();
                    break;
                case 3:
                    //circle
                    context.beginPath();
                    context.arc(canvasIcon.width / 2, canvasIcon.height / 2, size / 2, 0, 2 * Math.PI, false);
                    context.fillStyle = color;
                    context.fill();
        ...