HTML5's Canvas Tool: An In-Depth Look

Mike D'Agruma RennerThe task was to build a pop-up div container. Sounds simple enough for any web designer. The JavaScript is easy to write. The CSS is even easier.
But what’s the best way to handle a custom shape if the client should request one in the container design? Again, it sounds simple enough. The use of an image, maybe some advanced CSS3.
What about HTML5’s canvas tool? The one that let’s a designer use JavaScript to render shapes on the fly. Is that a viable option? It’s new, after all. Isn’t “new” just another word for “more effective and efficient?”

I know what you’re thinking: HTML5 is only compatible with the latest versions of all mainstream browsers (with Internet Explorer always being a crapshoot at best), so how can it implementing any one of its features save any time at any point during the design process?

It depends on the project. I was able to give it a try using the following pop-up div container:

Consider that both the drop shadow and rounded corner CSS3 elements used in the above design require coding hacks to render properly in Internet Explorer. That meant I was probably going to be using IE conditional statements no matter which method I went with.

That meant it was finally time to experiment with HTML5.

And that begs the question: Was it worth the effort?

In this instance, I wanted to see how the HTML5 canvas tool would work in terms of drawing the small triangle that comes off the left side. It’s easy enough using CSS – simply create a container to hold an image of the arrow and use positioning and z-index to overlay it.

Okay, but what about canvas? HTML5 defines it as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

This is all of the HTML it requires:
canvas id=”triangle”

In this case, the id is calling the JavaScript responsible for the legwork, the legwork being the small arrow that comes off the left side of the rounded-corner box. That’s right. JavaScript. The canvas tag just creates a rectangle on your page. JavaScript does the drawing. Points are determined using an x- and y-coordinate grid.

A few setbacks presented themselves right away:

  1. It’s easy enough to draw a square or circle, but I needed to create a custom shape. Custom is usually just another word for “more work.”
  2. You can append borders and drop shadow to a shape with just two lines of code, but there is no way for the designer to control which edge gets either of those and which doesn’t. Unlike CSS, there is no border-left, border-right, etc. That means two shapes, which, again, means more work.
  3. Developer programs that offer a preview function, such as Adobe Dreamweaver, can’t read HTML5. That means text program-style-coding: make an edit, reload a browser to check the edit over and over and over and over and … . It’s a fairly mind-numbing process when you’re constantly adjusting line points by a pixel point or two. It also makes for, you guessed it, more work.

“More work” more or less became the theme of my little experiment. Here is the JavaScript I wrote to draw both shapes. Fortunately, the commands are somewhat similar as you go:

It took thirty-four lines of code to draw two shapes. Personally, if I have to make an edit down the line, I’d rather change a few pixels in a few lines of code than have to resize and edit an image in Photoshop, but a bigger consideration is the amount of time I spend getting to that point.

The canvas tool is one of the more interesting features I’ve had the opportunity to experiment with since HTML5 was introduced, but in this instance, it just wasn’t practical. However, I definitely see its value, and I’ve come across a number of websites it was used to produce some pretty cool effects.

In looking at the new syntax, I can tell HTML5 is going to drastically streamline a website’s HTML code base – when the majority of Internet upgrade to a browser that can render it consistently. Until then, its use seems to be more restricted to improving existing web applications, such as form functionality.

%d bloggers like this: