Skip to content

frogcat/canvas-arrow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Simple javascript lib to add CanvasRederingContext2D#arrow method

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published