Hands On: Painting the Canvas

---

Today online games infest the web. Without downloading and installing any application, you can directly go to a web page and immediately start an on-line game.

---

Most of the web pages have amazing graphics and are competitive with many simple games that require local installations. These games are generally implemented with Flash, Silverlight, or other plug-ins that support the hardware acceleration available on your computer.

HTML5 provides a new element, <canvas>, which is a place where you can draw. The standard defines a canvas API with operations supporting web applications that demand high performance and low-overhead graphics. You know that you can add JavaScript code to your page, which runs when a web page is loaded, or as you interact with the page. This code can do many things in your browser, in fact it can do everything that the browser’s current security configuration allows. If the inline page contains malicious code, that may run on your page.

In this section you will only scratch the surface of the possibilities made available through <canvas> and its accompanying API, but it will be enough to understand the concept behind this new HTML5 element.

📜NOTE: To use the canvas API, you must have a basic understanding of JavaScript. Do not feel intimidated if you have not used JavaScript before, the samples in this section are easy to read assuming you have ever used C, C++, C#, VB, or any other imperative programming languages. There are no tricks utilizing any very JavaScript-specific features.