To help you with this, let's take a step back. In fact, let's take many steps back and look at how our two approaches map to how your browser translates what you want into something that gets displayed. Core to this translation are two modes called Retained Mode and Immediate Mode. While it may not seem like it right now, understanding the details of both of these modes will help you know when to rely on the DOM APIs and when to use canvas to display visuals on the screen.
Retained Mode (DOM)
In a retained mode system, the way you get things to display on the screen is by sending your hopes, dreams, and desires to your browser's Graphics API. This API, much like Santa Claus, gives you whatever you ask for.
The following diagram roughly describes the division of labor between you, the Graphics API, and your browser:
This translation between your raw markup and code to something visual is handled by your browser's Graphics API. This API takes what you specify and creates an in-memory model (often referred to as a scene, object list or display list) of what the final output should look like. Once it creates this model, the final step is to translate the model into the arcane draw commands that your browser understands.
All of this happens very seamlessly behind the scenes. You simply define your application. The details of getting what you defined into something you can see is automatically handled for you.
Immediate Mode (Canvas)
Contrasting the gentle comforts of a retained mode system is the immediate mode one where...well, let's just look at the diagram first:
In an immediate mode system, you do all of the heavy lifting. You not only specify what needs to be drawn, you also create and maintain the model as well. As if all of this wasn't enough, you also specify the draw commands to get your browser to actually update! Your browser's Graphics API, the API that did so much for you in the retained mode world, doesn't do much here. It simply takes your draw commands and sends them off to the browser for execution.
In HTML, immediate mode comes into play when you are using the canvas element. Anything you wish to draw inside it requires you to issue primitive draw commands and handle all aspects of managing the scene and redrawing when changes happen.
When to Use Which?
Whenever a section heading promises a clear answer, you know that the answer is never clear. This time is no exception. Choosing between the immediate mode-ness of the canvas and the retained mode-ness of your DOM is not an exclusive decision. It can actually be quite scandalous! You can choose just one, the other, or even both.
In this section, let's build on the overview you saw in the previous section and look at the advantages and disadvantages of each of the approaches.
Since we are talking about the DOM here, you will spend a majority of the time, possibly even all of your time, in this retained mode world. Despite the comforts it provides, it isn't perfect.
Let's look at its perfections and imperfections in more detail:
- Easy to use. The DOM abstracts away a lot of the details that would otherwise get you bogged down. Examples of details that can bog down even the best of us include layout, event handling, clean up, selection/highlighting, accessibility, being DPI friendly, and so on.
- Redrawing is handled for you. You only specify what you want to display on the screen. The details of how to do that and how often to refresh are all left to the Graphics API to handle.
- CSS! CSS! CSS! You can easily modify the visuals of your DOM elements using CSS.
- Memory intensive. You know all of the details that get taken care of for you when using a DOM element? Well, that care doesn't come cheap. Your DOM elements are very complex little things, and all of this complexity takes up space in your browser's memory. The more elements you are dealing with, the more resource hungry it all gets.
- Less control over how things get drawn. For certain graphics-related tasks, the default rendering may be a bit limiting. Browsers optimize for their particular needs, and those optimizations may go counter to what you want to do.
If this were a popularity contest, I would feel pretty bad for immediate mode and the canvas element that uses it. Fortunately, it isn't! Immediate mode systems certainly carry their own weight - even in the more limited cases they are used in.
Let's look at some of their cool (and less cool) features in more detail:
- Fast. Really fast. Because an immediate mode system doesn't maintain its own model, your code is all that stands between you and the browser redrawing. The many layers of abstraction that slow operations down simply do not exist in the immediate mode world.
- You have a lot of flexibility. Since your code controls all aspects of when and how something is drawn to the screen, you can tweak and customize the output any way you would like.
- Great for dealing with many elements. Compared to a retained mode system where every little addition to your scene takes up extra memory, immediate mode systems don't have that problem. Generally, an immediate mode system will always use less memory than a retained mode system - something that becomes more noticeable as you add more and more elements into the mix.
- It can be slow when drawing to large areas. How quickly a redraw completes is proportional to the number of pixels you are re-drawing. If your addressing a really large area, things could get slower if you are not careful and do not optimize appropriately.
- It is complex. Because you are handling more of what it takes to get something to display on the screen, there are a lot more details for you to keep track of. Getting up to speed with the various draw commands and how they are used is no picnic either.
Understanding the retained mode and immediate mode differences makes it much easier to sympathize with the DOM on certain things and with the canvas on others. By now, hopefully you have a good idea of when to use one over the other. In case it helps, here is my short list on when I use canvas and when I use the DOM.
When I Use a Canvas
- Complex visualizations
- Animations involving content that nobody needs to interact with (example)
- Pixel manipulation (example)
When I Use the DOM
This is pretty simple. I use the DOM for everything else that I don't use a canvas for. The canvas has very limited uses for the kinds of things that I do.
To see more examples and materials that indirectly utilize everything you've learned here, check out the following articles written by me and others:
- Introduction to Animation in HTML
- Drawing Circles on a Canvas
- Resizing the HTML Canvas Element
- Animating Many Things on a Canvas
- How To Choose Between SVG and Canvas [microsoft.com]
If you have a question about this or any other topic, the easiest thing is to comment below or drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )