An Introduction to the HTML5 Canvas
- The Canvas Challenge to Flash
- Images on a Canvas
- What the Future Holds
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
HTML5 is the World Wide Web Consortium’s (W3C’s) proposed specification for the next generation of the web. It’s the operating manual covering the workings of browsers, search robots, and other web software. After 10 years of relative stagnation in web evolution, HTML5 is a remarkable achievement with many new document elements, attributes and features. The canvas element is one of these.
As its name suggests, the canvas element creates a rectangular drawing surface on a web page. Its associated JavaScript application programming interface (API) provides methods for drawing lines and curves, filling shapes with color, positioning text, loading in external images and applying scaling, rotations, and other transformations.
The Canvas Challenge to Flash
The HTML5 canvas provides an open platform for graphical applications within the context of the web page. Because the canvas API is built into an HTML5 browser, canvas applications should perform better than plugin-based technologies, such as Adobe's Flash, especially on devices that can take advantage of hardware graphics acceleration.
Unlike a Flash application, a canvas-based app is a true HTML element. It can be styled with CSS and can interact with other page elements and scripts, including the HTML5 audio and video elements. Multiple canvases can be superimposed in switchable layers.
What's nice about the HTML5 canvas is how easy it is to use. Here's a quick (but complete) example that creates a simple interactive bar graph. The following code can be copied and saved in a text file, then opened locally in an HTML5 browser. It works with my current versions of Safari, Chrome, Opera, and the Firefox 4 beta on my desktop computer, as well as on the iPhone, iPad, and Android browsers. (Note: HTML and JavaScript comments are in boldface type.)
<!DOCTYPE html>
<html>
<head><title>Canvas Bar Graph</title>
<style type="text/css">
canvas { border-bottom: thin solid; }
</style>
</head>
<body>
<!-- Define a 400 x 400 pixel drawing canvas with id = c1 -->
<!-- give it a thin bottom border for the x axis -->
<canvas id="c1" width="400" height="400">
Sadly, your browser doesn't support the <em>canvas</em> element.
</canvas>
<!-- Define an input field for numbers from 0 to 100 -->
<!-- The form returns without submitting anything -->
<!-- the draw function is called when the input changes -->
<form onsubmit="return false;">
<input type="text" size="3" onchange="drawBar(this.value); this.value = '';" />
enter a number from zero to 100 and hit return.
</form>
<!-- JavaScript for drawing vertical bars on the canvas -->
<script type="text/javascript">
// get the canvas DOM object and set a 2-dimensional context
var canvas = document.getElementById("c1");
var c1 = canvas.getContext("2d");
var offset = 5; // initial x position
// our draw function.
function drawBar(val) {
val *= 4; // scale the input to pixels
c1.fillStyle = 'blue'; // set the fill color
// draw a filled rectangle 30 pixels wide with user input height
c1.fillRect(offset, 400 - val, 30, val);
// set the text color to white and write the value
c1.fillStyle = 'white';
c1.font = 'bold 15px arial,sans-serif';
c1.fillText(val/4, offset + 5, 420 - val, 26);
offset += 40; // offset to the next bar
}
</script>
</body>
</html>
The canvas element is simple, having no required attributes. It can be given a height and width to override the default of 300x150 pixels. In the canvas element shown above, an id attribute is set that will be used to reference it in the script. The canvas element has a start and end tag; the content inside is fallback markup for older browsers, search robots, and other user agents. The fallback content could include the object, embed, and param elements for a Flash application that would play in legacy browsers.
In the previous example, a CSS rule is used to render the canvas with a thin bottom border to serve as the x-axis of the bar graph. Following the HTML code for the canvas is the markup to create an input form for entering the height of each successive bar. The input element has an onchange attribute that calls a handler function to draw the bar each time the input value changes.
The script block at the end of the example contains JavaScript code to initialize the canvas 2D drawing context and define the drawBar function. The drawBar function scales the input value to pixels, uses the fillStyle and fillRect methods to draw a vertical bar and labels it using the font and fillText methods. Finally, the offset variable is incremented to move the x-axis position for the next bar.
Figure 1 shows what this example looks like in Safari after a half-dozen numbers have been entered. It’s meant to be used with the number and enter keys on a keypad. The graphs can be screen-captured as images for use on blogs and in presentations. You can try out a working demo on my site.
)
Figure 1 A fast bargraph generator using an HTML5 Canvas element.