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,
        draggable: true
    });
}

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,
    draggable: true
});

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