YOUR GUIDE TO
When to Use a JavaScript Canvas Library or Framework
And when to use an HTML DOM Library or Framework
In this guide we will explore when we should use a Canvas framework as opposed to traditional HTML, CSS and JS or a DOM framework.
Both libraries and frameworks provide pre-built code to help you make things faster and easier. The general difference is with a library you pick the parts you want and use them. With a framework you plug into a system that does things for you. They are quite similar and lines blur so we will use the term framework for simplicity.
Brief History of HTML, CSS, JavaScript (DOM) and Interactive Media
Traditional HTML, CSS and JavaScript have been around since the nineties and the main focus has been to make Web documents for the Browser. Other environments such as Macromedia/Adobe Director and Flash were used for Interactive Media.
Interactive Media (initially, multimedia) could be considered to encompass Web design and development but to keep things clear, let us say Interactive Media tends towards interactivity beyond navigation. This includes making things, doing things, playing things. Web sites tend towards interactivity to navigate to things or to show things. Communication sits in the middle and is handled by both. This is a generalization.
The Rise of the Canvas
With the launch of HTML 5, roughly ten years ago, JavaScript was split into a core language and a set of Web APIs (Application Program Interfaces). A major API is the DOM. It is important to note that language of JavaScript is independent of HTML tags. Another Web API is the Canvas API.
The canvas tag is an HTML tag and therefore part of the DOM. But we will consider it separate from traditional DOM because it is coded differently.
The canvas tag shows a Bitmap and the Canvas API holds the classes and code that let you make things on the canvas tag by dynamically changing the Bitmap with JavaScript. When HTML 5 launched it was declared, with a touch of paraphrase, that:
The canvas will be the end of Flash!
A story on that down below but, in general, the canvas can be thought of as an open source, free and ubiquitous way to provide Interactive Media.
When To Use the DOM or the Canvas
We will take you through some examples and charts made a few years back. These are based on the ZIM JavaScript Canvas Framework (founded by the Author). For other options, please see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.
What is the Canvas Good at?
The canvas is good for letting users move things around in a free-form manner which is great for making art and playing games. At the top of this guide we show TEN BANNERS of excellent things to make with the canvas. These are listed below. Press on any of the links to see examples and read a MORE section describing how they can be made on the Canvas. We follow the list with more examples from the when to use a Canvas Framework versus the DOM video.
- GEN ART :: generative art
- GAME ZAPS :: quickly made games!
- LOGO PLAY :: interactive logos
- AD MUSE :: interactive advertising
- DATA VIS :: data visualizations
- UI/UX :: components and expression
- LEARN APPS :: e-learning
- ESCAPE PUZZLES :: challenges
- INFOACTIVES :: interactive infographics
- WONDER CARDS: holiday cheer!
What is the DOM Good At?
The DOM and the DOM frameworks are good at displaying information and in particular text information. In comparison, the canvas is a picture. Text can be added to the canvas and it can be made responsive, but the text cannot be readily selected or searched as on the DOM. Long scrolling pages of text or text and images is an excellent use of the DOM. The DOM is great for social media sites, forums, shopping, and all the information apps we are used to.
Here are is a Visual Comparison of Frameworks demonstration page of what apps made with the DOM look like compared to what apps made with the canvas look like (and we use the term apps loosely). We show screen captures of CSS, Angular, React, and VUE as the leading contenders for the DOM. We show PaperJS, ThreeJS, CreateJS, ZIM, P5js, PixiJS and Phaser for the Canvas. Flutter is Dart based, very complex and probably closest to React in feel. See the Demo Page to zoom and pan on these pictures.
Note that the DOM based apps are almost all white for readable text. ThreeJS and P5js are mostly dark art/demo presentations. The canvas libraries are more colorful with games being the brightest.
We made the DOM and canvas comparison to encourage new coders and creators to really think about what they want to make. We do not understand why so many people want to make things that look like Facebook. Ugh.
Chart Comparison of DOM and Canvas Frameworks
We have generalized Interactive Media to include sites in the chart above. We use Interactive Media for information and social purposes, for education, play, art and simulations. We can broadly break it up into sites, apps and games with art perhaps falling under sites or apps.
DOM :: ORANGE
The DOM is best suited for the parts color-coded in orange. Sites with navigation, service apps, text games like text quizzes. These have text and images with audio and video less integrated. For instance, just playing a YouTube video. Generally, we are navigating or hiding and showing things with some animation. We can select and submit forms.
CANVAS :: GREEN
The parts in green are generally what the canvas is best at. Sites that are interactive beyond navigation. Formerly, these might be called mini-sites in the Interactive Agency world. Apps where the user produces a product such as a piece of art or a configuration or simulation are a good use of the canvas as are Games. At the moment, these are primarily 2D games with Unity taking the majority of the market in 3D games. Canvas features make heavy use of drag and drop, hit tests, rotation, animation, masking, scaling and dynamic drawing with integrated sounds.
What Happens if We Use the Wrong One?
HTML and CSS are fundamentally awkward to use for Interactive Media because their numbers are strings, there are forced and verbose work-arounds for animation and conditionals. Here some examples:
- canvas is 10% HTML, CSS, SVG and JS
- canvas sparkles on pegs at 21% the size of the DOM
- canvas animation at 46% the size of CSS animation
- canvas rocket at 33% the size of VUE
- canvas Tesla Coils at 40% the size of React
- canvas bicycle with interface at 49% the DOM
- canvas pattern at 10% the size of CSS
It is a shame that coders and often coders from the design / front-end side have to deal with this. On the flip side, if you can easily make something in HTML, CSS and JS then there is no reason to import a canvas library.
Or is there?
There was a fun Challenge on CodePen where we had to code an average HTML page based on an image. The trick was that you could not preview your code as you went. Here is the picture:
We posted our results. ZIM on the Canvas is at the middle top and is the only one that comes close. It is also at 59%, 63%, 68% and 34% the few that we checked against at the time. Second row right is the challenge page.
Having worked and taught extensively in both DOM and Canvas, Dr Abstract can quite confidently say that it is a joy to work on the canvas compared to with CSS puts you through on a regular basis.
Why Use a Framework for the Canvas?
We have outlined recommendations as to when to use the DOM versus the canvas. Assuming that our app, art, game, etc. is best suited for the canvas, then when should we use a framework for the canvas?
Our general answer to this is that the canvas is so low level, that we would almost always want to use a framework for the canvas. Here are the reasons might we NOT use a framework for the canvas:
- What you are making just needs the basic drawing features of the canvas such as drawing lines from here to there. For instance generative art.
- You prefer to build your own libraries or everything from scratch.
The following is a diagram that shows the native canvas features compared to the CreateJS library features compared to the ZIM Features (when ZIM was half as old as it is now). It then shows build times for each.
Raw JavaScript and the Canvas API give you the features listed under JAVASCRIPT in the diagram above. Basically, we can make shapes. We can also add text, use composite operations and do basic pixel manipulations (not listed).
STORY
When the canvas came out it was to be the end of Flash. Well… basically, the Canvas gave us the Flash Bitmap Class. Which Flash had already ten years earlier and we were grateful for it. But Flash also had 50–100 other classes to handle Interactive Media. These were honed by very logical and passionate people over many years to give us all we needed for Interactive Media.People looked at the canvas, made pong or a pong tutorial and then sadly turned away and joined the excitement of Angular at the time then React, etc. This had the potential to form a dark age of digital expression if not for the dedicated work of early canvas creators at CreateJS and PixiJS, and the porting of Processing to P5js for example.
Flash set a benchmark. There is no point in individuals building the same infrastructure as it is needed in almost every project. So libraries like CreateJS and PixiJS built the infrastructure. If we build with the libraries then our build time is less. Also, what we are building with is well tested and documented. The libraries were also created with mobile in mind.
ZIM added more to CreateJS like components to bring us to the benchmark. Dr Abstract, founder of ZIM and Canadian New Media Awards Programmer of the Year for his work in Flash, had many custom classes for parallax, pages, damping, etc. to build Interactive Media efficiently. These were built into ZIM as controls for the canvas.
Libraries and Frameworks save you time so you can concentrate on what is unique to your project: creativity, the user experience, the assets, the steps and logic, custom classes, testing, debugging and launching!
CONCLUSION
Hopefully, you have found this guide handy and have a better idea of when to use a canvas framework. We would love to take you on a tour of the canvas! Please see ◎ Your Guide to Coding Creativity on the Canvas. In this article we explore a dozen exciting aspects of coding the canvas!
All the best! Dr Abstract.
Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!
