What Else You Can Do with a Canvas

The canvas is a much more powerful tool than demonstrated by these short exercises. The canvas API contains many operations to draw, and it leverages the hardware acceleration, provided your browser supports it. The canvas handles fractional pixels, can use antialiasing, and many other features to ensure a great user experience.

You can combine a canvas with other HTML markup to create overlapping layers in your page. This hybrid solution is often useful, because in this way you use both HTML markup and canvas where they are the most powerful. Canvas is very strong in managing graphics, while HTML is great in displaying text layout. For example, when you create a game, graphics can be arranged by a canvas object, while text like scores and statistics can be managed with HTML markup.

CSS provides you properties to absolutely position page elements and arrange their z-order, or virtual depth on the page. With them you can easily create hybrid pages.

For example, if you change the style.css file of Exercise-05-12 to this one, you can create a page with a canvas overlaid by the heading element: