JSFiddle - React, Tailwind, and code Playground

by puckipedia

HTML

<canvas id="c" width="437" height="437">Oeps!</canvas><br/>
<canvas id="d" width="1000" height="1000">Oeps!</canvas><br/>
<fieldset><legend>Buttons!</legend>
    <input type="text" id="text" placeholder="text"/><input type="text" id="grootte" value="20pt 'Comic Sans MS'" />
    <button onclick="draw();">DRAW</button>
</fieldset>

CSS

#c {
    border:1px #eee dotted;
}
#d {
    width:37mm;
    height:37mm;
}

JavaScript

//32,47
//37=437
//32=378
//37=555Update
function draw() {
    var canvas = document.getElementById("c").getContext('2d');
    canvas.fillStyle = "black";
    canvas.fillRect(0,0,437,437);
    canvas.fillStyle = "white";
    canvas.beginPath();
    canvas.arc(437/2,437/2,437/2,Math.PI*2,0,true);
    canvas.closePath();
    canvas.fill();
    canvas.fillStyle = "red";
    canvas.textAlign = "center";
    canvas.textBaseline = "middle";
    canvas.font = document.getElementById("grootte").value;
    canvas.fillText(document.getElementById("text").value, Math.round(437/2),Math.round(437/2));
    var d = document.getElementById('d');
    d.getContext('2d').drawImage(canvas.canvas,0,0,d.width,d.height);
}