Template for issues

by Steve Eberhardt

HTML

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

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
document.getElementById ("actionButton").addEventListener ("click", lineEvent, false);


function lineEvent(){
  var line
	canvas.on("mouse:down",e => {
    canvas.selection=false
    var pointer = canvas.getPointer(e)
    line = new fabric.Line([pointer.x,pointer.y,pointer.x,pointer.y],{
      fill:'red',
    	stroke:'red',
      strokeUniform: true,
      strokeWidth:10
    })
    canvas.add(line)
    canvas.renderAll();
    line.setCoords();
  })
  canvas.on("mouse:move", e => {
  	if (line){
    	var pointer = canvas.getPointer(e)
      line.set({
      	x2:pointer.x,
        y2:pointer.y
      })
      canvas.renderAll()
    }
  })
  canvas.on("mouse:up",e => {
  	canvas.off("mouse:down")
    canvas.off("mouse:move")
    canvas.off("mouse:up")
    canvas.selection=true
  })
}