Template for issues

by MagicLegend

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 #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');

canvas.selection = false;

var headlen = 15;  // arrow head size

function drawArrow(fromx, fromy, tox, toy, color, originX, originY) {

	var angle = Math.atan2(toy - fromy, tox - fromx);

	// bring the line end back some to account for arrow head.
	tox = tox - (headlen) * Math.cos(angle);
	toy = toy - (headlen) * Math.sin(angle);

	// calculate the points.
	var points = [
		{
			x: fromx,  // start point
			y: fromy
		}, {
			x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2), 
			y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
		},{
			x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2), 
			y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
		}, {
			x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
			y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
		},{
			x: tox + (headlen) * Math.cos(angle),  // tip
			y: toy + (headlen) * Math.sin(angle)
		}, {
			x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
			y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
		}, {
			x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
			y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
		}, {
			x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
			y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
		},{
			x: fromx,
			y: fromy
		}
	];

	var pline = new fabric.Polyline(points, {
  	/* angle: 50, */
		fill: color,
		stroke: 'black',
		opacity: 1,
		strokeWidth: 1,
		originX: originX,
    originY: originY,
		selectable: true
	});

	canvas.add(pline);
  console.log("Polyline:");
  console.log(pline);
	console.log("OriginX: " + pline.originX + " | OriginY: " +...