JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<img id="img" alt="" />

CSS

body {
    background-color: #CCCBCB;
}

JavaScript

var img = new Image(),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==';

canvas.width = 16;
canvas.height = 16;

ctx.font = "bold 8px Ubuntu, 'Segoe UI', Tahoma, Arial, 'sans serif'";
ctx.textAlign = 'center';

ctx.fillStyle = "rgba(200, 0, 30, 0.6)";
 
ctx.drawImage(img, 0, 0);

ctx.beginPath();
ctx.arc(11, 11, 5, 0, Math.PI*2, true);
ctx.fill();
 
ctx.fillStyle = "#fff";
ctx.fillText('4', 11, 13);

document.getElementById('img').src = canvas.toDataURL();
document.body.appendChild(canvas);