simpleTree.js allows to draw a tree on a canvas element within a HTML page.
The original idea and part of the code belong to Kenneth Jørgensen and his amazing Canvas Trees.
- Import jQuery and simpleTree.js in the HTML file.
- Add a
canvas
element to<body>
. - Add an
id
attribute to thecanvas
element.
- E.g.
<canvas id="simple-tree"></canvas>
.
- Create the tree by calling the function
simpleTree
, including the following arguments:
- Canvas element id, e.g.
"simple-tree"
; - Number of main tree branches, e.g.
3
; - Number of branches each branch has to be split, e.g.
3
; - Canvas background color, e.g.
"#000000"
; - Tree stroke color, e.g.
"rgba(255, 255, 255, 0.5)"
.
You can open the file simple-tree.html
and see how to use simpleTree.js
Check simpleTree.js in action at the following link -> davidetotaro.com/resources/simpleTree/simpletree