HTML5 Canvas API for Non-Graphics Designers
HTML5 was officially released back in 2008. With its release came a wide range of application programming interfaces (APIs), some more well-known than others. An API that we believe deserves more attention is Canvas.
The Canvas API provides a powerful way for drawing and manipulating graphics using only JavaScript. Canvas can be used for “animation, game graphics, data visualization, photo manipulation, and real-time video processing”. However, Canvas is not just a great visual graphics resource, but for more data-driven, information-focused web applications as well.
How Does the Canvas API Work?
Canvas works by manipulating a specific HTML5 element called the canvas element. To manipulate the canvas element, you must get the element by its selector (i.e., ID, class, etc.), and then get its context.
let myCanvas = document.querySelector(“#myCanvas”);
let context = myCanvas.getContext(“2d”);
From there, you can perform various actions, such as rendering shapes or lines, all by using JavaScript. Since the canvas element is part of HTML, it is both natively supported by web browsers and part of the Document Object Model (DOM). There is no need to learn a non-web standard language or install or link remote files.
We created the Volanno logo animation below with Canvas. As you can see, the animation seamlessly integrates into the webpage with no linked files or external resources. Moreover, it is all processed in memory.
Essentially, Canvas instantly draws an image instead of loading an image with an image (img) element.
So, if you want to draw a red square and then change it to blue, you would draw a red square first and then draw a blue square within the same canvas element. This process is simple, quick, and effective thanks to the Canvas API.
The Canvas API is also powerful enough for more complex or rich images. For example, you can convert an image to a data URI and then instantly have it drawn on a canvas element. Once converted, you can manipulate the image with pixel-like precision as with Adobe Photoshop.
You can even animate that image or make it interactive. Truly, the sky is the limit, and you can redraw the image over and over while making changes to it.
A Tool for Developers, Too
HTML5 Canvas may sound like a tool solely for creative graphics designers, but any developer who works with the front-end of web applications can harness the power of Canvas, as it is all conveniently and natively standardized in JavaScript.
For example, a developer could get data-points from a server response and render them in a visually meaningful way, such as in a graph. Moreover, that graph can be dynamic and change as the data-points change.
Another great use of Canvas is in enabling and capturing written signatures, initials, or notes. Since Canvas uses JavaScript, you can add listeners to the canvas element and enable touchstart, touchmove, and touchend events. This will allow any user to write directly on the canvas element.
In a signature workflow, for example, a user could draw a signature on the canvas element, which would then be converted into a data URI or image and posted to a server for storage. Later, when the user accesses the record with the signature, it can be re-rendered in the canvas element by converting it to an image, and then be drawn in the canvas element.
And instead of capturing only the signature, users could actually draw directly on an image within a document or add notes to it. Since the document is an image rendered in a canvas element, it can be processed in the same way for storage and access.
A New Type of Interactive Resource
The canvas element can be placed anywhere on an HTML page, as well as overlaid on top of other elements. In the signature example above, this means the original image can remain untouched while capturing date and time stamped version-controlled signatures or notes in which each layer of the image is a chronological version of the image.
With Canvas, you can even render and manipulate videos in the canvas element, such as changing the background color.
The Canvas API is a powerful resource for all types of web applications. It not only manipulates images and videos, but it also introduces a new type of interactive resource for web applications. Where users once could only click, type, and scroll on a web page natively, now they can write or draw on the page as well.
