Fabric - drawing with shape cursor

by STHayden

HTML

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

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

var canvas = new fabric.Canvas('c', {
  isDrawingMode: true,
  freeDrawingCursor: 'none'
});

canvas.freeDrawingBrush.width = 10;

var mousecursor = new fabric.Circle({ 
  left: 0, 
  top: 0, 
  radius: canvas.freeDrawingBrush.width / 2, 
  fill: '#9f9', 
  originX: 'right', 
  originY: 'bottom',
})

canvas.add(mousecursor);

canvas.on('mouse:move', function(obj) {
  mousecursor.top = obj.e.y - mousecursor.radius;
  mousecursor.left = obj.e.x - mousecursor.radius;
  canvas.renderAll()
})