Skip to content

Latest commit

 

History

History
49 lines (33 loc) · 1.36 KB

README.md

File metadata and controls

49 lines (33 loc) · 1.36 KB
Raw

canvas-arrow

Simple javascript lib to add CanvasRederingContext2D#arrow method

image

Demo

Usage

// 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>
...

API

CanvasRederingContext2D#arrow(startX, startY, endX, endY, controlPoints);

Parameters

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.

image