Template for issues

by Steve Eberhardt

HTML

<script src="https://cdn.jsdelivr.net/gh/fabricjs/fabric.js/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 meta).
 * This templates uses the latest dev verison of fabric.js.
 * Visit the Resources tab to change it to something in the form of:
 * "https://cdn.jsdelivr.net/gh/{github_user}/fabric.js@v{branch_name}/dist/fabric.js"
 * Make sure the file you point to is up to date.
 */

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

var line = new fabric.Line([0, 0, 300, 300], {
  stroke: "#00FF00",
  strokeWidth: 2
});
canvas.add(line);
canvas.requestRenderAll();

var dashArray = [40, 360];
line.strokeDashArray = dashArray;

line.animate("strokeDashArray", dashArray, {
  duration: 400,
  onChange: function(newColor, no, pos) {
    var dashLen = 360 - 300 * pos * pos;
    console.log(dashLen);
    line.strokeDashArray = [200 - dashLen / 2, dashLen];
    canvas.requestRenderAll();
		//canvas.renderAll.bind(canvas);
  }
});
// ADD YOUR CODE HERE