The primary intent of this script is to render a DOM tree onto a canvas in a aesthetically pleasing manner.
The secondary intent is to serve as an educational primer. Libraries will not be used, and there will be a verbose amount of documentation.
I welcome any and all contributions. My only requests are to please avoid using libraries (I want to know whats going on under the hood), and please include a healthy chunk of documentation.
Included in the comments is a bunch of links where the following are being used. They range from beginner level understanding to advanced. They are listed in no particular order.
- https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
- https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers
- https://developer.mozilla.org/en-US/docs/Web/API/Document/links
- https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children
- https://developers.google.com/speed/articles/reflow#guidelines
Links from the demo branch
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
- https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
- https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events