DoubleClick Menu

by pmamode

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="300"></canvas>
<div id="console-log"></div>

CSS

canvas {
    border: 1px solid #ccc;
}
.console-line {
    font-family: monospace;
    margin: 2px;
}

JavaScript

var consoleLine = "<p class=\"console-line\"></p>";

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};

var canvas = new fabric.Canvas('c', {
    selection: false
});

canvas.forEachObject(function (o) {
    o.hasBorders = o.hasControls = false;
});

canvas.on('mouse:up', function (options) {
    if (typeof options.target == "undefined") {
        var rectswirl = new fabric.Rect({
            left: options.e.clientX - 10,
            top: options.e.clientY - 10,
            originX: 'center',
            originY: 'center',
            fill: 'red',
            width: 100,
            height: 100
        });
        canvas.add(rectswirl);
        console.log('the canvas was clicked!');
    }
});