Skip to content

Javascript library to generate tournaments charts with HTML5 canvas

Notifications You must be signed in to change notification settings

Seikon/Tournament.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Tournament.js

Javascript library to generate canvas tournament brackets easily with automatic bracket fit

Welcome to Tournament.js

This library wants to develop a simply solution for web projects that need Tournaments diagrams deploying it in a few lines, but with the flexibility of customize the visualization and design

Based on HTML5 canvas to generate Graphics and Text. It allows to customize the size and style of each element,implements animations and fit it automatically with the brackets.

For the moment the library has only the direct-elimination (Play-off) tournament with 2 ways of visualization:

  • Normal: Tournament generates itself from left to right
  • Divided: Tournament generates itself from left to a center point (Math.log2(number of participants)) and from right to the same center point.

And two types of animation:

  • FadeOut: A participant appears in the next round from transparency 0 to 1
  • ByLetter: A participant appears in the next round letter by letter until its entire name is displayed

You can find practical examples and images in "examples" folder with all types of visualization.

Feel free to fork the repository and add new funcionalities to help grow up the library! :)

About

Javascript library to generate tournaments charts with HTML5 canvas

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published