Mozilla html5 examples-Canvas tutorial

April 17, 2011

<canvas> is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

In this tutorial I will try to describe how to implement the <canvas> element in your own HTML pages. The examples provided should give you some clear ideas what you can do with <canvas> and can be used to start building your own implementations.

Before you start

Using the <canvas> element isn't very difficult but you do need a basic understanding of HTML and JavaScript.

The <canvas> element isn't supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.

In this tutorial

Source: https://developer.mozilla.org/en/canvas_tutorial

Examples mozilla html5 examples,

30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we should see HTML 5 implementations popping up in the next year or two as more companies get on board with the advanced features.

HTML5 examples and Demos collection 1 Here's a collection of HTML5 examples and demonstrations. It's constantly being added to and if you have one that you'd like to see here.

iPhone HTML5 Offline App Demo Apple calls these "Web Clips" (online) or "Offline Applications" (offline).

HTML 5 Offline Cache Demo this is a demo using HTML 5 and Firefox 3.0+ offline storage capabilities. when you access this page, Firefox will prompt you for permission to store offline data. if you click allow, this page will be stored locally on your computer. if you access this page again with or without an active internet connection you will notice that the browser does not issue a HTTP GET request and loads the page from disk. pretty cool stuff!

HTML 5 Demos and Examples HTML 5 Demos and Examples