Inspired by Modern Chess Openings 15th Edition, a book by Nick De Firmian, this project relies on the HTML <canvas> element to display chess trees and enable responsive editing of these trees.
Using <canvas> requires more work and is more error-prone during development than other methods, but it is much faster and allows for optimizations impossible otherwise. For example: at the beginning of the project, we would redraw the entire tree whenever a specific move was added or deleted from the tree. As we tested with larger trees, though (around 30+ nodes), the time it took to update introduced a noticeable delay.
In order to provide a smoother interface, we decided to clip and shift areas of the canvas depending on the context of the addition or deletion. For the case when the user deletes the only child of a parent node, we delete a (1 node width x 1 node height) area underneath the parent node. There are similar shortcuts for all potential cases. This is much faster than having to redraw the entire tree, and handles trees of 500+ nodes with ease.
Another bottleneck we ran into was lag when the user shifted their view of the tree (pressing the arrow keys or click + drag of the mouse). To accelerate this frequently-used operation, we keep a second canvas of the entire tree offscreen, cropping the area the user expects to see and copying it to the onscreen canvas. This is much faster at the cost of higher memory use.
Like any technology, the <canvas> element has benefits and drawbacks. We'd love to help you navigate using this in your own project. Get in touch below!
