JSFiddle - React, Tailwind, and code Playground

by Yoichiro Tanaka

HTML

<script src="http://www.eisbahn.jp/test/jcanvas.min.js"></script>
<canvas width="300" height="300"></canvas>

JavaScript

$.jCanvas.defaults.fromCenter = false;

function drawText(text, x, y) {
    $("canvas").drawText({
        fillStyle: "black",
        strokeStyle: "black",
        strokeWidth: "0.5",
        x: x,
        y: y,
        fontSize: 14,
        fontFamily: "sans-serif",
        text: text
    });
}

drawText("categories", 50, 50);
drawText("category_id", 50, 80);
drawText("name", 50, 100);

$("canvas").drawRect({
  strokeStyle: "black",
  strokeWidth: 1,
  x: 45,
  y: 45,
  width: 100,
  height: 75
});

$("canvas").drawLine({
    strokeStyle: "black",
    strokeWidth: 1,
    x1: 45,
    y1: 70,
    x2: 145,
    y2: 70
});