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 version="1.1" width="100" height="100"
<ellipse stroke="#000: cx="50%" cy="50%" rx="50%" ry="50%"
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 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:
<canvas id="canvas" width="100" height="100">
var canvas = document.getElementByID('canvas');
var context = canvas.getContext)'2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = canvas.width / 2;
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStlye = 'black';
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:
|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