JSFiddle - React, Tailwind, and code Playground

HTML

<h2><a id="canvasContainerDiv"></a>hello</h2>

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 = size;
    canvasIcon.height = size;

    //set shape
    //1: rectangle, 2: triangle, 3: circle, 4: diamond
    switch (shape) {
    case 1:
        //rectangle
        context.beginPath();
        context.fillStyle = color;
        context.fillRect(0, 0, canvasIcon.width, canvasIcon.height);
        break;
    case 2:
        //triangle
        context.beginPath();
        context.moveTo(canvasIcon.width / 2, 0);
        context.lineTo(canvasIcon.width, canvasIcon.height);
        context.lineTo(0, canvasIcon.height);
        context.lineTo(canvasIcon.width / 2, 0);
        context.fillStyle = color;
        context.fill();
        context.closePath();
        break;
    case 3:
        //circle
        context.beginPath();
        context.arc(canvasIcon.width / 2, canvasIcon.height / 2, canvasIcon.height / 2, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
        context.stroke();
        break;
    case 4:
        context.beginPath();
        context.moveTo(canvasIcon.width / 2, 0);
        context.lineTo((7 / 8) * canvasIcon.width, canvasIcon.height / 2);
        context.lineTo(canvasIcon.width / 2, canvasIcon.height);
        context.lineTo((canvasIcon.width * 1 / 8), canvasIcon.height/ 2);
        context.fillStyle = color;
        context.closePath();
        context.fill();
        context.stroke();
        break;
    }
}
drawShapeIcon(32, 3, "#c0c0c0");