JS - DOM vs Canvas

JS - DOM vs Canvas

In general I will cover the rendering, API's, preformance and memory compared to each other.
the DOM (Document Object Modal) is a crossplatform that inducts HTML, XHTML and XML documents as a tree structure.
To render HTML or simular tree structured crossplatforms, this is done by the browsers internal modal, simular to the DOM modal.
HTML tree hierarchy:

Document tree
 |
 |-html
 |
 |---head
 |     |--title
 |          |---title value
 |
 |---body
 |     |--header tags
 |     |     |-- header values
 |     |
 |     |
 |     |--etc.. etc..
 |     |
 |
 |

The Canvas API is integrated in HTML5 and is used to create visuals via Javascript.()

H=window.innerHeight;
W=window.innerWidth;

document.body.style.margin="0";
document.body.style.backgroundColor="#000";
document.body.style.overflowX="hidden";
document.body.style.overflowY="hidden";

canvas=document.createElement("canvas");
canvas.width=W;
canvas.height=H;
canvas.style.backgroundColor="#000";
document.body.appendChild(canvas);
var draw=canvas.getContext('2d');

draw.your.context();

When a website webpage is loaded, the browser should make a current DOM of the page. Therefore the loaded DOM is object orientated and dynamic. ☯
JS, as we know, can manipulate the HTML to make changes, removes and adds elements and attributes, by this meanings it covers also the CSS and DOM events. That is alot manipulation provided by JS ☕

Lately I was wondering which one is better to create visuals, DOM manipulation or the HTML5 canvas API.
So i was creating some visual animations to compare the earlier mentioned comparisons and do some little debuggin'.
See below the visuals I used(in the end of this article you will find the source codes).

DOM Visual

Canvas Visual

DOM
 |
 |-Javascript
 |
 |---DOM API
 |     |--HTML tree

Canvas
 |
 |---Canvas API
 |     |--Javascript 
 |
 |---HTML tree

As you see the above structure, it is clear that the DOM is faster in creating the visuals in the HTML tree while the canvas is slower in rendering but does not render anything to the DOM!(see below)
DOM

Canvas

As it comes to the preformance, the frames per second of the DOM is more then half of that of the Canvas.
See below what the differences are.
DOM

Canvas

Not to mention what it does to the memory! I debugged it out and ran out of time to take some screenshots...(Excuse me, difference was 2.4..MB)
My conclusion:

DOM
 |
 |-Javascript
 |
 |--- Pros
 |     |-- Fast Render
 |     |
 |     |-- Easy to create & manipulate
 |     |
 |     |-- ...
 |
 |
 |--- Cons
 |     |-- Creates on the DOM's API (on the fly)
 |     |
 |     |-- Memory and FPS eater
 |     |

Canvas
 |
 |-Javascript
 |
 |--- Pros
 |     |-- Canvas API render
 |     |
 |     |-- Great preformance qua FPS
 |     |
 |     |-- ...
 |
 |
 |--- Cons
 |     |-- Hard to create visuals
 |     |
 |     |-- Slow render
 |     |

What is your choice of drawing to the HTML tree? :P
Source codes:
DOM visual
Canvas Visual

© Vincent Berger