Backgammon-JS

A dependency-free JavaScript library for drawing backgammon boards on an HTML5 canvas. Drop board.js onto any page with a plain <script> tag — no build step, no npm — and render a position from an XGID string.

The simplest board

Drawing one board takes no configuration — the default is the starting position in the default style:

<script src="board.js"></script>

<div id="start"></div>

<script>
  const diagram = new Diagram(document.querySelector('#start'));
  diagram.draw();
</script>

Theme once, draw many

For a page full of diagrams, build a BoardStyle once and reuse it. A style is a partial options object — here one of the built-in THEMES presets plus a scale knob — and every board drawn through it shares the same look:

const style = new BoardStyle({ ...THEMES.Slate, pointWidth: 30 });

style.draw(document.querySelector('#d1'), 'XGID=…');
style.draw(document.querySelector('#d2'), 'XGID=…');

Every diagram below is drawn through that one shared style, on its own canvas:

Built-in themes

board.js ships named presets — Maple (the default), Midnight, Ocean, and Slate. Coordinated shades (frame gradient, point tips, checker sheen) are derived automatically from a handful of base colors, so the same position looks like this in each:

Try it yourself

Pick a preset or adjust individual base colors and watch a board re-render live:

Theme:

Or adjust individual base colors:

Frame Board Odd points Even points Player 1 Player 2

Game ID:

View the source on GitHub.