html canvas arrows for div blocks (javaScript)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

HTML5 canvas arrows for blocks (javaScript)

It is small javaScript library for connecting static div blocks an arrows on web page.

Documentation, examples and demos.

How to use:

Step1: (Add lib.)

    <script src='../arrows.1.0.0.js' type='text/javascript'></script>

Step2: (Initialize(once) and draw arrows)

    <script type='text/javascript'>
          var cArrow = $cArrows('#commonParent').arrow('#fromDiv', '.toDiv').arrow('.fromDiv2', '#toDiv2');


  • arrow(from, to, options) - from(string), to(string), options(object - optional)
  • arrows(arrowsArray) - arrowsArray(array[])
  • clear()
  • draw()
  • redraw()
  • updateOptions(newOptions)

Advanced Settings:

    <script type='text/javascript'>
          var cArrow2 = $cArrows('#commonParent', { render: { strokeStyle: '#EC971F', lineWidth: 3 } }) // options for all arrows
          .arrow('#fromDiv', '.toDiv')
          .arrow('.fromDiv2', '#toDiv2', { render: { strokeStyle: '#2D6CA2' } }); //options for one arrow
          cArrow2.arrow('.block3', '.block2', { arrow: { connectionType: 'ellipseAngle', arrowSize: 4 } }); // drawing more other arrows

License: GNU GPL