HTML5 discovery tutorial

New attributes for input fields : placeholder, pattern, autofocus CSS pseudo classes...

• Example of pattern, placeholder and autofocus + pseudo classes : http://jsbin.com/arifih/2/edit

Selecting files and directory

• Use of the new "multiple" attribute for selecting several files at a time. In addition, uses the HTML5 File API for reading pictures and preview them : http://jsbin.com/ozacel/2/edit
   
• Use of the new "directory" attribute for selecting a directory. Works only in webkit-based browsers (Chrome, Safari) : http://jsbin.com/iyixaf/3/edit
  Note that in the example the attribute is named "webkitdirectory" instead of "directory" as this is still an experimental implementation.

Date, time, etc.

• Play with the new date input field (Opera only) : http://jsbin.com/otovut/2/edit

Color

• Play with the new type=color input field (Opera only) : http://jsbin.com/itufey/2/edit

Number

• Example of input field type=number (Opera, WebKit) : http://jsbin.com/unagec/2/edit

Range

• Example of input type=range (Opera, Webkit) : http://jsbin.com/ezuvir/3/edit

Email

• Example of a form with a type=email input field : http://jsbin.com/uxajif/3/edit, see the use of pseudo CSS class invalid for styling. Try to submit the form to see Browser validation.
• Example of a type=email input field with the use of the "multiple" attribute : http://jsbin.com/opaqam/2/edit

Tel

• Example of input type=tel with use of attributes "placeholder" and "pattern" for custom validation : http://jsbin.com/equyim/2/edit

Url, search, voice recognition

• Examples of these types of input fields. Note : voice recognition only works in Chrome so far : http://jsbin.com/ifamoq/3/edit

The new <output> field

• Example of usage of the new <output> field : http://jsbin.com/evecux/2/edit

The new <datalist> element

• Try this example that shows a <datalist> element in action for autocompleting an input field without the need of JavaScript code : http://jsbin.com/uwozih/2/edit

Declare <input> fields out of the <form></form>

• Try this example : http://jsbin.com/adewof/2/edit

Simple examples

• The most simple example, draw a red filled rectangle in a canvas : http://jsbin.com/utihaq/2/edit
• Simple example of drawing into a canvas with different colors, widths, shapes : http://jsbin.com/apihec/2/edit
• Draw lines and play with line attributes lineWidth, lineJoin, lineCap : http://jsbin.com/iwaqit/2/edit
• Draw a circle, play with styles, closePath()... : http://jsbin.com/iyecom/2/edit
• For more complex shapes (quadratic and bezier curves), see http://www.html5canvastutorials.com/...dratic-curves/ and http://www.html5canvastutorials.com/...bezier-curves/

Gradients

• This example shows a gradiant of colors : http://jsbin.com/urucem/3/edit

Clipping/using mask to draw only a part of the canvas

• This example shows an example of clipping using a triangle shape (borrowed from : http://projects.joshy.org/presentati...sentation.html) : http://projects.joshy.org/presentati...sentation.html

Track mouse events

• This example shows how to draw like a pencil, drawing lines between each mouse move : http://jsbin.com/idegay/2/edit

Stack canvases in layers

• This example shows how we create two canvases one on top of another. Mouse draws in the canvas at the back, while the mouse position is displayed in the front canvas. Each the mouse moves, the front canvas is cleared before redrawing the mouse position, while the back canvas remains intact. Try it : http://jsbin.com/ogehin/2/edit

2D Transformations

• Try this example that shows how to translate/rotate/scale objects + how to save/restore the current context in a stack : http://jsbin.com/azacaf/3/edit

Display webcam stream in a video element

• Simple display of webcam stream in a <video> element : http://jsbin.com/ipeyal/5/edit

Apply CSS effects on a video element with live webcam