Dom-to-canvas

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.

Demo App

• Demo Here
• Demo Branch

Contributing

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.

Helpful Links

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

Canvas Documentation

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL