Posted on by & filed under Content - Highlights and Reviews, Programming & Development, Web Development.

More and more applications are now being ported to the web. The ubiquity of the browser, access to increased bandwidth at lower costs, and the explosion of mobile devices are all driving forces leading to an increase in the demand of web applications. With native desktop applications; however, developers had access to powerful graphics engines that allowed them to create rich, interactive user interfaces for applications like 3D Modeling, Desktop Publishing, and Games. A standardized, freely licensed technology was not available to web application developers until the recent introduction and adoption of a newer generation of web standards. In this post, we discuss two such standards, namely Scalable Vector Graphics (SVG) and the HTML5 Canvas API, and explain the purpose and ideal use case of each.

SVG is an XML-based format for defining static, dynamic or interactive vector graphics content. It supports styling with CSS along with animation using only a declarative syntax. Moreover, since SVG is part of the Document Object Model of a webpage, it can be programmatically manipulated using JavaScript, just like any other DOM object. For example, to draw a circle in SVG, you would write the following:

For more on using SVG versus Canvas, take a look at this section in Introducing HTML5, Second Edition by Bruce Lawson and Remy Sharp.

The HTML5 Canvas is a new element introduced in the latest version of the HTML standard. This new element adds a versatile JavaScript API to allow code to programmatically perform drawing operations inside a Canvas context. There are currently two types of context available: 2D context and 3D or WebGL context. For this post, we will be discussing the 2D context only.

The Canvas API allows pixel level manipulation to be performed easily. There is no concept of state. If a shape is drawn over another shape, the data of the pixels below it are lost. This allows for quick rendering of images and sprites in games, for example. To draw a circle in HTML5 using the Canvas API you would do the following:

SVG and HTML5 Canvas are meant for very different use cases. Since SVG is resolution independent, it is more suitable for building rich, interactive user interfaces for applications. Also since it is declarative, it’s ideal for cases where accessibility is required. On the contrary, SVG is not well suited for the quick rendering of objects such as in games and graphic-intensive animations.

With the Canvas API, the state of the graphical objects has to be maintained manually, so it’s overkill for cases where simple, interactive objects are required. On the other hand, in cases where a lot of objects are involved and it is necessary to perform redraws quickly and efficiently, such as in games or in modeling applications, the Canvas API is a much better option than SVG.

For more on Canvas, be sure to read this section in Head First HTML5 Programming by O’Reilly Media.

Safari Books Online has the content you need

Check out these HTML5 Canvas books available from Safari Books Online:

You’ll learn how to build interactive multimedia applications with HTML5 Canvas, using this new element to draw, animate, compose images, and more. You’ll also learn the best way to use existing JavaScript libraries, as well as how to incorporate related aspects such as audio and video.
Foundation HTML5 Canvas: For Games and Entertainment teaches you how to make exciting interactive games and applications using HTML5 canvas. Canvas lets you produce graphics, animations, and applications using the HTML5 and JavaScript web standards. It allows you to draw directly within the browser without the need for third-party plugins like Adobe Flash, and so canvas works perfectly across desktop and mobile devices, like the iPhone and Android.
HTML5 Games Development by Example will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.
HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then provides techniques for handling features not directly supported by the API such as animations and canvas interactivity. It winds up by providing detailed templates for a few of the most common HTML5 canvas application.
Core HTML5 Canvas: Graphics, Animation, and Game Development presents a code-fueled, no-nonsense deep dive into that API, covering everything you need to know to implement rich and consistent web applications that run on a wide variety of operating systems and devices.
If you’re a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key features — including improved text elements, audio and video tags, geolocation, and the Canvas drawing surface — and uses concrete examples and exercises to apply and reinforce these concepts.

About the author

Shaneeb Kamran is a Computer Engineer from one of the leading universities of Pakistan. His programming journey started at the age of 12 and ever since he has dabbled himself in every new and shiny software technology he could get his hands on. He is currently involved in a startup that is working on cloud computing products.


Tags: Canvas, Graphics, html5, Javascript, SVG,

Comments are closed.