JSFiddle - React, Tailwind, and code Playground

by Persijn Kwekkeboom

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<a>click the images</a>

<div> <span>hex:</span>

    <input id="png-hex" type="color" value="green" />
</div>

<h3>PNG</h3>

<img id="pnghat" src="http://i.imgur.com/OmhZ7Pi.png" />
<div>
    
<h3>Canvas</h3>

    <canvas width="70" height="70"></canvas>You get the idea...</div>

<h3>svg</h3>

<svg height="70" width="70">
    <path d="m 132,274 c -13,-14 -26,-40 -29,-59 -5,-30 -1,-40 26,-65 17,-17 35,-30 41,-30 5,0 10,-4 10,-10 0,-5 18,-10 40,-10 46,0 90,34 90,69 0,11 7,26 15,35 14,13 11,19 -24,55 -37,38 -44,41 -93,40 -43,0 -57,-5 -76,-25 z m 108,-70 c 0,3 -18,6 -41,6 -36,0 -69,17 -69,35 0,33 116,50 146,21 8,-8 14,-19 14,-25 0,-6 7,-11 15,-11 8,0 15,-4 15,-10 0,-5 -7,-10 -15,-10 -10,0 -15,-10 -15,-31 0,-17 -6,-37 -14,-45 -16,-16 -96,-19 -96,-4 0,6 -7,10 -15,10 -8,0 -15,7 -15,15 0,10 10,15 31,15 27,0 59,19 59,34" id="path8" transform="translate(-10.000000,70.000000) scale(0.200000,-0.200000)" />
    <path d="m 19.635903,19.086526 c -3.677602,0.0058 -6.729303,-1.776924 -6.729303,-3.594924 0,-3.333 11.716,-5.05 14.746,-2.121 0.808,0.808 1.414,1.919 1.414,2.525 0,0.606 0.766924,0.961189 1.574924,0.961189 0.808,0 1.455076,0.553811 1.455076,1.159811 0,0.505 -0.704433,0.967203 -1.38661,0.988602 -0.682178,0.0214 -1.139855,0.265746 -1.423067,1.146275 -0.283212,0.880529 -1.286457,0.492996 -3.10009,0.02779 -1.699835,-0.436016 -2.873328,-1.098453 -6.55093,-1.092743 z" id="hat" style="fill:#FF0000" transform="scale(2) translate(-5, -5)" />
</svg>

CSS

#pnghat {
    cursor: pointer;
    width: 60px;
    background-color: red;
    border: 1px solid gray;
}
canvas, svg {
    border: 1px solid gray;
}

JavaScript

$('#pnghat').click(function ()  {
    var col = $('#png-hex').val();
    $(this).css('background-color', col);
});

draw_hat();
$('canvas').click(function () {
    var col = $('#png-hex').val();
    draw_hat(col);
});

function draw_hat(col) {
    console.log(col)
    if (typeof col === 'undefined') {
        col = '#F00';
    }
    $('canvas').drawPath({
        strokeStyle: '#000',
        strokeWidth: 4,
        p1: {
            type: 'quadratic',
            cx1: 35,
            cy1: 50,
            x1: 50,
            y1: 40,
            x2: 20,
            y2: 40
        },
        p2: {
            type: 'quadratic',
            cx1: 5,
            cy1: 35,
            x2: 20,
            y2: 20
        },
        p3: {
            type: 'quadratic',
            cx1: 45,
            cy1: 10,
            x2: 50,
            y2: 25
        },
    }).drawEllipse({
        fillStyle: col,
        x: 35,
        y: 25,
        width: 30,
        height: 15
    });
}

$('svg').click(function () {
    var col = $('#png-hex').val();
    $('svg #hat').css('fill', col);
});