New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

HTML5 First Look
Illustration by

Canvas overview


From:

HTML5 First Look

with James Williamson

Video: Canvas overview

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.
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5 First Look
4h 28m Beginner Aug 23, 2010

Viewers: in countries Watching now:

In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.

Topics include:
  • Understanding the history of HTML5
  • Using new tags
  • Understanding HTML5 semantics
  • Coding ID and class attributes in HTML5
  • Structuring documents
  • Building forms
  • Exploring HTML5 native APIs
  • Encoding and adding HTML5 video
  • Exploring associated technologies such as CSS3
Subjects:
Developer Web Web Design Web Development
Software:
HTML
Author:
James Williamson

Canvas overview

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 tag was actually first introduced by Apple 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 tags. Well, the content inside the tags is considered what we call fallback 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 tag but that also would be unwise.

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 tag itself. 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.

A quick glance at how some people are using Canvas is typically all it takes to get somebody excited about using it. I've even read several articles that pose the question, will Canvas kill Flash? Personally, I doubt it. Currently, the Canvas API cannot approach the native capabilities of the Flash Player, and the jury is still out as to which solution offers better performance within the browser. But I have no trouble envisioning it taking over certain areas. Not only that, but Adobe has openly discussed adding Canvas authoring tools to Illustrator and Flash. It's worth noting that current Canvas implementations require some pretty hefty JavaScripting skills, but I fully expect to see Canvas user interface solutions on the market shortly.

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.

There are currently no FAQs about HTML5 First Look.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.