DOM vs Canvas


Author: Vincent Berger
Created: Jan 21, 2019






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?
Source codes:
DOM visual
Canvas Visual

Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top