fabric drawing app demo

fabric drawing app demo

by franknstayn

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="800" height="300" style="border: 1px solid red"></canvas>

<button id="drawRectMode">
  Draw Rect
</button>

<button id="selectMode">
  Select Mode
</button>

<p id="text">
</p>

JavaScript

var rect, isDown, origX, origY;

var canvas = new fabric.Canvas('c');
canvas.selection = false;

var isDrawing = true;
$('#text').html("current: drawRectMode");

$('#drawRectMode').on('click', function() {
  $('#text').html("current: drawRectMode");
  isDrawing = true;

  canvas.forEachObject(function(o) {
    o.selectable = false;
  }).selection = false;

});

$('#selectMode').on('click', function() {
  $('#text').html("current: selectMode");
  isDrawing = false;

  canvas.forEachObject(function(o) {
    o.set({selectable: true}).setCoords();
  }).selection = true;  
});


canvas.on('mouse:down', function(o) {
  if (!isDrawing) {
    return;
  }
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  var pointer = canvas.getPointer(o.e);
  rect = new fabric.Rect({
    left: origX,
    top: origY,
    originX: 'left',
    originY: 'top',
    width: pointer.x - origX,
    height: pointer.y - origY,
    angle: 0,
    fill: 'rgba(255,0,0)',
    transparentCorners: false,
    selectable: false
  });
  canvas.add(rect);
});

canvas.on('mouse:move', function(o) {
  if (!isDrawing) {
    return;
  }

  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);

  if (origX > pointer.x) {
    rect.set({
      left: Math.abs(pointer.x)
    });
  }
  if (origY > pointer.y) {
    rect.set({
      top: Math.abs(pointer.y)
    });
  }

  rect.set({
    width: Math.abs(origX - pointer.x)
  });
  rect.set({
    height: Math.abs(origY - pointer.y)
  });

  canvas.renderAll();
});

canvas.on('mouse:up', function(o) {
  if (!isDrawing) {
    return;
  }

  isDown = false;
});