JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js"></script>
<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/plugins/jcanvas-handles.min.js"></script>
<canvas width='400' height='400'></canvas>

CSS

canvas {
    border: solid 1px #000;
}

JavaScript

// Cache canvas
var $canvas = $('canvas');

// Add an invisible clickable rectangle
// that's the size of the canvas to manage
// adding new points to the path
$canvas.addLayer({
    type: 'rectangle',
    name: 'background',
    x: 0, y: 0,
    width: $canvas.width(),
    height: $canvas.height(),
    fromCenter: false,
    click: function (layer) {
        var props = {},
            path = $canvas.getLayer('path');
        path.data.numPoints += 1;
        props['x' + path.data.numPoints] = layer.eventX;
        props['y' + path.data.numPoints] = layer.eventY;
        $canvas.setLayer(path, props);
        $canvas.drawLayers();
    }
});

$canvas.addLayer({
    type: 'line',
    name: 'path',
    // Prevents path from getting in the way
    // of creating points
    intangible: true,
    strokeStyle: '#c33',
    strokeWidth: 2,
    rounded: true,
    x1: 100, y1: 50,
    x2: 150, y2: 150,
    // It's necessary to keep track of the
    // number of points in the path
    data: {
        numPoints: 2
    },
    handle: {
        type: 'arc',
        fillStyle: '#fff',
        strokeStyle: '#c33',
        strokeWidth: 2,
        radius: 10
    }
})
.drawLayers();