Simple javascript lib to add CanvasRederingContext2D#arrow method
// include canvas-arrow.js to extend CanvasRenderingContext2D
<script src="https://frogcat.github.io/canvas-arrow/canvas-arrow.js"></script>`
...
// draw
<script>
var context = canvas.getContext("2d");
context.beginPath();
context.arrow(0, 0, 200, 100, [0, 1, -10, 1, -10, 5]);
context.fill();
</script>
...
CanvasRederingContext2D#arrow(startX, startY, endX, endY, controlPoints);
Option | Type | Description |
---|---|---|
startX | number | The x axis of the coordinate for the begin of the arrow |
startY | number | The y axis of the coordinate for the begin of the arrow |
endX | number | The x axis of the coordinate for the end of the arrow |
endY | number | The y axis of the coordinate for the end of the arrow |
controlPoints | Array of numbers | controlPoints (#1) |
(#1) controlPoints array is list of x,y to define shape of arrow, see below.