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

Progress

• Example of input type=progress : http://jsbin.com/aqejis/edit#html,live

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

Access file details (name, size, type) :

• See this example that shows how to use the File descriptor : http://jsbin.com/ofelet/2/edit

Instant preview of dropped images

• Simple "drag images and instant preview"example  : http://jsbin.com/ewarak/2/edit
   
• Same example but this time we added two input fields : one for selecting multiple files (<input type="file" multiple/>) and one for selecting a directory. Notice that both dropped files or selected files can be processed by the same piece of code for instant preview : http://jsbin.com/orurip/11/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
• Draw some text : http://jsbin.com/ivazub/4/edit
• For more complex shapes (quadratic and bezier curves), see http://www.html5canvastutorials.com/...dratic-curves/ and http://www.html5canvastutorials.com/...bezier-curves/

Shadows

• Draw a rectangle with shadows : http://jsbin.com/oqeyip/2/edit

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

Images

• Simple image loading and drawing in a canvas : http://jsbin.com/emixuc/4/edit
• Use an image as a pattern for drawing shapes : http://jsbin.com/etufab/3/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

Save canvas content

• This example shows how to open a new tab in your browser with a PNG image of the canvas content : http://jsbin.com/etirop/2/edit

Access pixels inside a canvas

• Draw noise in a canvas, example that shows individual access to canvas's pixels : http://jsbin.com/ikanur/3/edit
• The Pixstatic library uses canvases content to apply filters to images. They draw images in a canvas, then apply filters, then getCanvas content back to the image src. See : http://briangrinstead.com/canvasslides/photos4.html for a demonstration + link to the pixstatic lib.

Basic usage

• Play a video, providing different encoding so that any browser can stream (source : http://html5doctor.com/video-canvas-magic/) : http://jsbin.com/irofib/6/edit
• Use external buttons to control the video player : http://jsbin.com/irofib/5/edit
• More impressive demo with opacity and text overlapping the video while it plays (use "view source") : http://www.w3.org/2010/Talks/0430-ww...plh/video.html

Change properties on the fly (size, position, angle etc.)

• Change size on the fly : http://jsbin.com/uretal/3/edit
• Change video size and rotation when the mouse is over it : http://jsbin.com/ahunon/3/edit
• Rotating video : http://jsbin.com/unaqej/4/edit, this example draws in real time each video frame into a canvas, rotate the canvas,draw again into another canvas. The video and first canvas are offscreen, only the last destination canvas is visible.
• Other funny (and ugly) demos of video transformed : http://www.w3.org/2010/Talks/0430-ww...plh/ugly.xhtml

Video special effects : incrustation / blue screening

Most of these special effects consist in drawing the current image from the <video> element into a <canvas>, then grab the canvas content, modify it in real time, then draw in another canvas or set the canvas content as the source of an <img>.

• Impressive demo by Mozilla developer (FF) : https://developer.mozilla.org/sample...ey/index.xhtml, use view source + look at the main.js file.
• Another similar demo (Chrome, IE, for codec reasons) : http://david.blob.core.windows.net/h...reenscreen.htm, detailed explanation are available here : http://blogs.msdn.com/b/davrous/arch...anvas-2-4.aspx
• The famous exploding video demo : http://www.craftymind.com/factory/ht...nvasVideo.html  Explanations here : http://www.craftymind.com/2010/04/20...into-3d-space/

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

•  Try this example that shows how to use the getUserMedia API : http://jsbin.com/ipeyal/6/edit

Take a snapshot from the live webcam stream

• The trick consists in drawing the current image from the video element into a canvas : http://jsbin.com/owohil/2/edit

Other demos

• The paint program proposed in the "geek path" of this tutorial shows a Paint Program in which you can paint with your live picture coming from the webcam stream while sending it through WebSockets to other people using the program at the same time : http://mainline.essi.fr
• Look at the demos at the end of : http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Check if your browser supports WebSockets

• Go to http://websocket.org, look at the small box in the top right. WebSockets need to be activated in Opera 11..

Simple example

Use the "view plain menu", copy the source in a testWebSocket.html file, open it in your browser. It will send a message to the html5rocks.websocket.org/echo URL (WebSocket server that echos messages it receives) and display some alerts to check if WebSockets are supported, if the message has been correctly sent or received as an echo.

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function WebSocketTest()
        {
            if ("WebSocket" in window)
            {
                alert("WebSocket is supported by your Browser!");
                // Let us open a web socket
                var ws = new WebSocket("ws://html5rocks.websocket.org/echo");
                ws.onopen = function()
                {
                    // Web Socket is connected, send data using send()
                    ws.send("Message to send");
                    alert("Message is sent...");
                };
                ws.onmessage = function (evt)
                {
                    var received_msg = evt.data;
                    alert("Message is received..." + received_msg);
                };
                ws.onclose = function()
                {
                    // websocket is closed.
                    alert("Connection is closed...");
                };
            }
            else
            {
                // The browser doesn't support WebSocket
                alert("WebSocket NOT supported by your Browser!");
            }
        }
    </script>
</head>
<body>
<div id="sse">
    <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

High level library over WebSockets

A more complete example involving real use cases is proposed in the "advanced tutorial for geeks" :  A multi-participant Paint in HTML5 that proposes to install the NodeJS server + some additional modules that ease the development of multi-participants over WebSockets. This tutorial uses the NowJS library that provides ditributed JavaScript objecs + session and group management over WebSockets.

Popular libraries for NodeJS, like socket.io, propose fallback mecanisms in case the web browser used by a participant does not support web browsers (while your code remains unchanged, the lib will switch from WebSockets to Flash WebSockets or Ajax Long Calling...), handle deconnexions, etc.

NowJS is built upon socket.io and proposes Remote function/method calls and shared objects between client and server code. Such libraries dramatically reduce the amount of code necessary to write classic use cases for multi-participant sofware.

Simple example

• Displays longitude and latitude : http://jsbin.com/ezivih/2/edit

With Google Maps

• Shows a picture with of your position, using Google Map, shows also how to process errors : http://jsbin.com/etayim/2/edit
• Displays position on a interactive google map : http://jsbin.com/ovehuj/2/edit

Track position in real time

• A trip meter using the geolocation api and the watchPosition() function : http://www.html5rocks.com/en/tutoria...ion/trip_meter