HTML and CSS Reference
In-Depth Information
chapter 4
n n n
Drawing with the Canvas
One of the reasons for the popularity of the Web is the graphical user interface offered to end users.
Images, animations, fonts, and other interactive effects make a web site appealing from an end user's
perspective. However, one limitation that web site developers may have encountered when developing
pre-HTML5 web applications was drawing graphics in the browser using client-side capabilities. ASP.NET
developers have been using the
System.Drawing
namespace to generate graphics on the fly on the server
and then send them to the client, but there is no native support for drawing graphics in the browser
window.
HTML5 does a great job at client-side graphic rendering by offering the
canvas
. As the name suggests,
a canvas is a rectangular area of a web page in which you can perform drawing operations with the help of
the canvas API and JavaScript/jQuery. In this chapter, you learn about the HTML5 canvas in detail.
Specifically, you look into the following:
• Drawing lines, curves, paths, shapes, and text on the canvas
• Applying special effects such as shadows, gradients, pattern ills, and transparency
to drawing objects
• Saving the canvas state on the server for later use
The chapter concludes by building a sample application that incorporates what you've learned.
The <canvas> Element
As mentioned previously, an HTML5 canvas is a rectangular space on a web page where you carry out
drawing operations. An HTML5 canvas is represented by the
<canvas>
tag. As of this writing, the latest
versions of all the leading browsers (IE, Firefox, Chrome, Opera, and Safari) support the
<canvas>
element,
although the support varies in terms of the canvas features offered.
You can place a canvas on a web page using the markup from Listing 4-1.
Listing 4-1.
Basic
<canvas>
Element
<head runat="server">
<script type="text/javascript" src="Script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Script/modernizr-2.5.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
