Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we are going to discuss some of the elements and APIs native to the HTML5 specification that are focused on application development. We'll start with using Canvas in HTML5. Canvas is a new element in HTML5 that allows you to create a drawing environment within your browser. The Canvas 2D API, which is contained in its own separate specification, is then used to draw a two-dimensional vector graphics or to place other resources within a raster rendering space. So even though you are declaring vector graphics, you are drawing in a raster rendering space.
Now this specification does have an allowance for 3D graphics and several plug-ins have emerged to allow 3D graphics within the Canvas environment. However, uneven implementation among browsers makes it unlikely that 3D graphics within a Canvas element will be formalized anytime soon. Although new to HTML5, the as part of its Mac OS X Dashboard. Now support was then added in Gecko based browsers as well, which made it an ideal candidate for inclusion into the HTML5 specification.
Currently, Canvas is supported in all versions of the major browsers and will be supported in Internet Explorer in the 9.0 release, making it one of the parts of the HTML5 specification that has already seen considerable adoption and I guess you could sort of consider it ready to use now. So how does Canvas work? In the next few movies, we'll build an example of Canvas for our trail guide. But for now, let's take a look at a brief overview. Defining a Canvas on your page is pretty simple. All you need to do is this.
Now, the Canvas element uses an ID attribute to allow scripts to identify which Canvas area to draw in. The width and height attributes that you are seeing instruct the browser how large of an area to define for that particular Canvas element. Now, you also probably have noticed that there is text inside the Well, the content inside the content and it's supposed to be shown if the device does not support the Canvas element. So really, you could put anything in there that you wanted to, to be honest.
Now the specification states that this content should serve the same purpose
as the Canvas content so that the information will be available for
non-supporting devices as well.
However, in reality, that's likely to be really difficult, based on the possible
complexity of Canvas content.
You could have a game, you could have really advanced animations, there really
could be anything going on inside that Canvas.
That might be hard to represent using other content.
So it's also really tempting to view this as an accessibility attribute like an
The fallback content is only available if Canvas is not supported. Since Canvas is a visual element, browsers could support it but not be able to accurately describe or provide alternate content for some users, especially those with disabilities. So you'll need to take a different approach for providing accessibility content for Canvas elements. Now after the Canvas element has been defined, you'll need to use the Canvas API to draw or place other graphics into that space. Here's the sample script that references our myMap Canvas element that we'll be using and then places an image inside that Canvas region.
Now drawing within the Canvas environment is pretty easy as well. You can use methods such as beginPaht, fillRect, fillStyle, moveTo, lineTo, closePath, and stroke to draw vector artwork within the raster Canvas. As you can see, there are many more methods available to you. Now we are going to explore a few of those methods in more detail as we plot a graph over our map in just a moment. While drawing in the Canvas space is fairly straightforward, in order to plot the points or place graphics properly, you need to first understand the grid that Canvas uses to define the Canvas space.
The Canvas element draws a grid sized based on the width and height attribute defined within the When drawing or positioning elements within the space, you pass an x and a y coordinate. The Canvas element's grid origin is in the upper left-hand corner. So if you specify a coordinate of say 0 and 0, it would plot this point exactly at the top left- hand corner of the Canvas. Positive x values are going to move you to the right and positive y values are going to move you down. You can also use methods in the Canvas API to draw text or place images inside the Canvas space.
This can be a great way of adding captions or labels to dynamically drawn illustrations or to build photo compositions. In our example, we are going to use these techniques to composite a map image with a drawn elevation graph. This is a very simple overview of some of the capabilities of the Canvas element. You can scale, resize, transform, and animate the contents within the Canvas. Be sure to check out the HTML5 specification and the separate 2D Canvas API for more details. I also want to recommend Mozilla's Canvas tutorial and Opera's Canvas tutorial.
Both of these can give you tremendous insight and how those browsers are implementing the Canvas specification and the slight differences. Canvasdemos.com is a great place to go for inspiration and to see how far some developers and designers are taking Canvas. Finally, I want again to mention Modernizr. If you are going to add Canvas content to your page at this early stage of adoption, you need to start detecting support for it. Modernizr is a robust HTML5 detection library and is really easy to use. So I recommend checking it out as well.
When that happens, adoption of the Canvas element will likely accelerate. So now that we've covered a brief introduction to Canvas, let's put those skills to work by adding Canvas content to our trail guide page.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105512 Viewers
56 Video lessons · 117171 Viewers
71 Video lessons · 86406 Viewers
131 Video lessons · 41306 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.