The canvas element is the foundation of our pure HTML5 document viewer, VirtualViewer® HTML5. Snowbound’s Lead Software Engineer, Ian Kane, explains…
What is HTML?
Why is HTML5 important?
HTML5 is the latest version of HTML, which came out in October of 2014. This version introduced many new elements for developers to use. From audio and video tags that allow the webpage to display those types of media to the canvas tag, which allows users to display and manipulate images.
What is an Element?
Simply put, an element is a building block of a webpage. Think of it as the smallest single interactable part of any site. There are small ones, like Buttons and Spans, which are used to give users interactable elements or display information. The Canvas is one type of element, but it’s widely regarded as the most complicated element in any page that uses it. If you press “F12” in your browser, you’ll come up with the developer window, and if you click on the elements tag you can actually see all of the elements in a given webpage. Highlighting one with your mouse will show you what that element looks like on the webpage.
Why is the Canvas Element important?
Canvas: Image display and manipulation
So, how does a canvas element do all this? The pipeline is a little confusing so I’ll break it down point by point.
The first step is the easiest: Make a canvas element. Generally that is done by putting a <canvas> tag in your HTML and giving it an id so you can grab it in your script block.
Now that we have the base, let’s move onto Step 2: Grabbing the context. The context, or CTX as I’ll refer to it, is the way the canvas will display information. Most of the time we’ll use a 2D context to display any 2D image, but you can also have a 3D context or a bitmaprenderer which is basically making it into a fancy image element.
So, we have a CTX now, our code will look something like this:
var canvas = document.querySelector(‘canvas’);
var ctx = canvas.getContext(‘2d’);
This means we can now get to using the context and canvas to display all sorts of images. The simplest thing we can do on this blank canvas is to draw a basic rectangle.
ctx.fillStyle = ‘red’;
Setting the fill style in the context allows the developer to control the color of the rectangle you’re drawing. The default is black, so we changed it to red for the example. The fillRect method takes in the starting x/y values (10,10), and asks for the width and height (100,100). Drawing coordinates is a whole different article, but this example will draw a perfect square a little out from the top left corner of the canvas. With four lines of code and some extra structure, we were able to display a small square. VirtualViewer is a massive product with thousands of lines of code, so let’s see how it uses the canvas with more nuance!
How does VV use the canvas?
To tie this back into Snowbound’s use of the technology, let’s see how VirtualViewer uses the canvas.
This is an image of our default viewer. The document is displayed in the main area, which is actually one large canvas element! We use this single element to draw everything—from documents to annotations to watermarks. We also use the canvas to manipulate images by making them brighter, increasing the contrast, cropping the document, and more. This single technology is how VirtualViewer gives its users the ability to view and interact with their documents. The example in the last section is almost exactly how we draw annotations in the viewer, except instead of telling it hard numbers, we pass in mouse data so that the annotation is drawn to the user’s exact specifications.
Other Uses for Canvas
The canvas can be used for all sorts of other interesting applications. We’ve been able to display video in VirtualViewer for some time now, and internally we’ve toyed with the idea of using Canvases to manipulate the pixels of a video to do things like brighten it, increase the contrast, or even invert the video to see certain things more clearly.
The issue with using the canvas to draw videos is that you have to do it frame by frame. Adding image manipulation on top of that would prevent most computers from handling that with a normal 24 frame per second video.
With a bit of quick math we can see a single frame of a 1080p video is 2,073,600 pixels and that at a rate of 24 times a second that is almost 50 million calculations per second. Most computers aren’t going to be able to handle that.
If you force the video into a 400×300 panel, then it’s only 120,000 pixels and about 2.5 million calculations per second, which takes about the same calculations for a single frame at 1080p. The downside is that your video is now lower resolution, which presents different visibility issues. Either way, it’s exciting that the technology has that capability, even if most users don’t have the hardware to harness it yet.
Another fun use of the canvas is using WebGL as a context instead of 2D, which allows one to render 3D models in a browser, WebGL is a Graphics Language that is royalty free and cross platform. It allows most anyone to display 3D content in a browser. The applications of this easy-to-access technology can range anywhere from virtual tours to video games.
Hopefully I’ve gone on long enough to show the value of the canvas element. From art to applications to video to games, the canvas is an incredibly adaptable tool that is still young having only been on the scene for less than a decade. Its ease of access and minimal hard programming knowledge allows it to be a good introduction to displaying programs.
Ian Kane is the Lead Software Engineer for VirtualViewer. He’s worked at Snowbound Software for six years, starting as a Junior Developer in 2014. He went to school at Rochester Institute of Technology, majoring in Game Design and Development and minoring in communications. In his spare time he is a baker and designs small tabletop games.