JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<canvas id="myCanvas" width="145px" height="170px"></canvas>
<textarea id="log"></textarea>

CSS

canvas {
    border: 0 solid red;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;

context.font = '10pt Calibri';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = 'blue';
context.fillText('145x170', x, y);

context.beginPath();
context.rect(0, 0, 145, 170);
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();

$('#log').val(canvas.toDataURL())