JSFiddle - React, Tailwind, and code Playground

by arcm111

CSS

canvas{
    border: 1px solid #333;
    margin-top: 100px;
}

JavaScript

var shape = 
    {
        //'circle':  {'r': 17, 'y': 30, 'x': 50, 'f': 333333},
        'arc': {'x1': 40, 'y1': 40, 'x2': 80, 'y2':40, 'r': 10, 'f': 333, 's': 000, 'l': 5}, 'aa': {}
        //'curve': {'x1': 20, 'y1': 90, 'cx1': 20, 'cy1': 27, 'x2': 80, 'y2': 90, 'cx2': 80, 'cy2': 27, 'f': 333, 's': 000, 'l': 5},        
    };

var createIcon = function(icon)
{
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 100; canvas.height = 100;
    
    var circle = function(c)
    {
        ctx.beginPath();
        ctx.arc(c.x, c.y, c.r, 0, 2*Math.PI, true);
        if (c.hasOwnProperty('s') && c.hasOwnProperty('l'))
        {
            ctx.strokeStyle = '#' + c.f;
            ctx.lineWidth = c.l;
            ctx.stroke();
        }
        if (c.hasOwnProperty('f'))
        {
            ctx.fillStyle = '#' + c.f;
            ctx.fill();
        }
        ctx.closePath();
    };
    
    var curve = function(c)
    {
        ctx.beginPath();
        ctx.moveTo(c.x1, c.y1);
        ctx.bezierCurveTo(c.cx1, c.cy1, c.cx2, c.cy2, c.x2, c.y2);
        ctx.lineTo(c.x1, c.y1);
        ctx.closePath();
        ctx.fillStyle = '#' + c.f;
        ctx.strokeStyle = '#' + c.s;
        ctx.lineWidth = c.l;
        ctx.fill();
        //ctx.stroke();
    };
    
    var arc = function(c)
    {
        ctx.beginPath();
        ctx.strokeStyle = '#' + c.s;
        ctx.lineWidth = c.l;
        ctx.moveTo(c.x1, c.x2);
        ctx.arcTo(c.x1, c.y1, c.x2, c.y2, c.r);
        ctx.stroke();
        ctx.closePath();
    };
    
    for (var key in icon)
    {
        switch(key)
        {
            case 'circle': circle(icon[key]); break;
            case 'curve': curve(icon[key]); break;
            case 'arc': arc(icon[key]); break;
        }
    }
    document.body.appendChild(canvas);
};

createIcon(shape);