Web Graphic Creation: The HTML5 Canvas

Whats HTML5?

In case you’ve been living under a rock for the past few decades, HTML or Hyper Text Markup Language is the main coding language used for building webpages. HTML5 is the latest version although it is still being developed. There are, however, already working features and it has already gained a lot of momentum on the Internet with websites being created using the working subset of HTML5 and browsers being developed to support the language.

Currently, almost all popular browsers have HTML5 support in varying degrees. Firefox, Chrome and Safari offer the most compatibility with the working features of HTML5. While older versions before Internet Explorer 9 lack support, there are compatibility fixes that can be found on the Internet.

How is HTML5 different and what is the hype about?

Up until the work began on HTML5 in 2004, the markup language generated mostly static web content such as text and images. Aside from the video and audio elements that enable users to play videos and sounds without the need for a separate plug-in, HTML5 presents new features that enhance the web experience. For example, it allows users to drag and drop elements on a website, access web content while offline, and is able to pinpoint geolocation more accurately, and much features. It facilitates and promotes interactive web design and enhanced graphics. Ultimately, it aims to standardize this level of web experience and make it consistent across all platforms, mobile devices and browsers. Ideally, when you want to watch a cool music video, an “interactive film” or play a game, you just open any browser and you can do just that without needing to install or run anything else. No Flash or Java plug-in requirements to bog your computer down or the lack thereof to annoy you with alerts.

The Canvas

One of the most notable new features of HTML5 is the canvas element. It is officially defined as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” The Canvas API allows one to draw 2D drawings and dynamic web graphics using JavaScript without the need for a plug-in. Just set up the <canvas> tag which generates the canvas. This is basically your drawing board on the webpage in which you can draw lines, curves, and shapes; fill objects; create patterns and gradients; and even produce animations—all using the HTML5 language.

Changing the Landscape of Web Graphics

This is definitely groundbreaking. For years, Flash was used to be able to display dynamic graphical content on websites where the prowess of the HTML language ended. But to create Flash content, one would need the Flash development toolkit, which is proprietary and, needless to say, expensive; to view Flash content on a website, one would need the Flash plug-in. Now, basically anyone with the pertinent knowledge and a text editor has the ability to bring the user web experience to greater heights. Thanks to HTML5 which is free and open to all developers and users. As HTML5 is still in the works (and far from being finished), we can expect a lot more developments to take place—which isn’t to say that HTML5 Canvas isn’t already amazing as it is at the moment. These websites built with HTML5, to name a few, shows you how Canvas is definitely a new and unprecedented technology in web graphic design:

http://mudcu.be/sketchpad/Sketchpad Online Paint/Drawing Application
http://agent8ball.com/Play a game
http://9elements.com/io/projects/html5/canvas/ - Audio and canvas elements in action

At the forefront, many are saying that HTML5 will soon be the death of Flash. But although it cannot be disputed that HTML5 is the future of the web, Flash is still the more mature technology and currently used by most interactive or dynamic web content. The only thing safe to say, as of the moment, is that HTML5 has killed Flash on the iPhone and the iPad. It is, however, not going anywhere soon as HTML5 is not (yet) capable of many effects and animations that Flash can produce. Furthermore, it is not really intended to replace Flash in the grander scheme of things, so it is quite unfair to expect it to do everything that Flash can.

The Canvas may not seem to be as user-friendly to designers as Flash is because it involves a lot of codes. Or more aptly, it involves just codes to produce the graphics or animations, as compared to Flash where you can literally draw the shapes and animate them. While it is definitely not easy to create graphics through codes (basically a challenge to the visual/spatial intelligent), once you really get to know it, you can create amazing web graphics, charts, animations, interesting video and audio web experiments that would be viewable and enjoyed by all. It’s going to be cross-browser compatible, lightweight on resources, and hassle-free for viewers and developers alike—which is primarily the ideal behind HTML5.

Flash basically lets you build your content on a separate platform and subsequently add this content unto your webpages without full integration into the browser. With Flash you can create a virtually unlimited number of images and animations on its platform with its more mature 2D API. Designers are apt to be more comfortable with Flash now and it definitely enjoys a larger user base and development community. Canvas is different in that it creates web graphics that go directly inside the page, making it part and parcel of what you view in the browser. In addition, it is an immediate drawing surface in that whatever you draw is final—if you need to move it around, you will have to redraw it by clearing out the previous code. Canvas cannot remember the shapes that have been previously drawn and this makes it a lot more complicated especially for creating complex web graphics.

The Canvas has its blatant disadvantages (and limitations) but one must always, always remember the goal of HTML5 to fully appreciate it. Ultimately, HTML5 as a whole, is intended to create universal browser compatibility. Keeping that in mind lets you appreciate and discover the advantages of Canvas.

One of the advantages of Canvas and probably one of its more practical uses is its ability to optimize images on the spot as you build your website. It used to be that you could put images on your website and edit it on Photoshop when you need a better image—now you can do that without having to open any other program. You can also put gradients and shadows on text and objects drawn on the canvas.

Canvas gives better control over text. Using Typekit, a web font service by Adobe, by inserting a code on your page, you can use any font on your website and have it displayed on your viewers’ browsers without having to worry whether or not they have it installed on their computers.

The role of Canvas in mobile web design cannot be missed too. More and more, as the use of mobile web devices grow rapidly, websites need to be mobile-ready to remain relevant. Most mobile web browsers have full support for HTML5 allowing developers and designers to create and optimize websites and applications and giving little need for mobile users to install Flash on their devices.

The final verdict is that there is none regarding Canvas vs. Flash on web graphic creation. They both have their own advantages over the other and we would probably see them coexist a lot longer. It is important to note that HTML5 is still in the works and even Flash can evolve to cope. In any case, as most of these things go, we can expect more developments in the future, even ones now unimagined .

By Elaine Latonio