Drawing Rectangle with mouse
HTML
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" style="border: 2px solid darkblue"></canvas>
<div style="position: relative; width: 1300px; height:30px; border: 2px solid black; margin-top: 5px">
<input type="button" id="selDiv" value="Container">
</div>
JavaScript
//Start when the document is loaded
$(document).ready(function () {
//Create variable to track ability to draw
var canDraw = true;
//Getting the canvas
var canvas1 = new fabric.Canvas('canvas');
//Setting the canvas properties
canvas1.setHeight(600);
canvas1.setWidth(800);
canvas1.renderAll();
// canvas1.selection = false;
//End of canvas1
var grid = 50;
// create grid
for (var i = 0; i < (800 / grid); i++) {
canvas1.add(new fabric.Line([i * grid, 0, i * grid, 800], {
stroke: '#ccc',
selectable: false
}));
canvas1.add(new fabric.Line([0, i * grid, 800, i * grid], {
stroke: '#ccc',
selectable: false
}));
}
// snap to grid
/* canvas1.on('object:moving', function (options) {
options.target.set({
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
});
});*/
//Create DivContainer Class
fabric.DivContainer = fabric.util.createClass(fabric.Rect, {
//type for consistency
type: 'div-container',
//constructor
initialize: function (options) {
options || (options = {});
//call super constructor for render abilities
this.callSuper('initialize', options);
this.set('hasRotatingPoint', false);
this.set('borderOpacityWhenMoving', 1);
this.set('borderColor', '#1FFFC7');
this.set('cornerColor', '#1FFFC7');
this.set('x', options.x || 0);
...