JSFiddle - React, Tailwind, and code Playground

by natchiketa

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<script src="https://rawgithub.com/bestiejs/lodash/v1.2.1/dist/lodash.min.js"></script>
<div class="container">
    <div class="log"></div>
    <canvas id="c" width="600" height="600"></canvas>
</div>

CSS

canvas {
    outline: 2px solid blue;
}

.log {
    float: right;
    color: black;
    : 1px solid cyan;
    width: 300px;
    height: 600px;
    overflow: auto;
}border

JavaScript

var canvas = new fabric.Canvas('c')

var line = new fabric.Line([10, 10, 500, 500], {
    stroke: 'green',
    strokeWidth: 5,
    selectable: false
});

canvas.add(line);
$(document).ready(function () {
    var $log = $('.log');

    canvas.on('mouse:up', _.bind(function (options) {
        options.e.preventDefault();
        var t = options.e.target;
        var coords = [options.e.pageX, options.e.pageY];
        var ccoords = [t.offsetLeft, t.offsetTop];
        //alert(_.values(options.e.target));
        $log.prepend($('<div/>').html(
            "page: " + JSON.stringify(coords) + "\n" +
            "canvas: " + JSON.stringify(ccoords)
        ));
    }, canvas));
    
    

});