HTML5 discovery tutorial

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

• Example of attributes "pattern", "placeholder" and "autofocus" + pseudo CSS classes "invalid", "required" :  http://jsbin.com/aguyaw/edit#html⁷⁰

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/abelak/edit#html,live⁷¹  
   
• Use of the new "directory" attribute for selecting a directory. Works only in webkit-based browsers (Chrome, Safari) : http://jsbin.com/iyixaf/3/edit#html,live⁷² 
  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#html,live⁷³

Color

• Play with the new type=color input field (Opera only) : http://jsbin.com/itufey/2/edit#html,live⁷⁴

Number

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

Range

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

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/5/edit#html,live⁷⁸ , 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/3/edit#html,live⁷⁹

Tel

• Example of input type=tel with use of attributes "placeholder" and "pattern" for custom validation : http://jsbin.com/equyim/3/edit#html,live⁸⁰

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#html,live⁸¹

Custom validation API examples

• Check that two passwords are identical: http://jsbin.com/otidav/7/edit⁸² 

The new <output> field

• Example of usage of the new <output> field :  http://jsbin.com/evecux/2/edit#html,live⁸³

The <meter> element

• This example shows interactions between <range>, <meter> and <input type=range> elements : http://jsbin.com/elodob/2/edit#html,live⁸⁴

The new <datalist> element

• Firefox : 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#html,live⁸⁵

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

• Try this example :  http://jsbin.com/adewof/2/edit#html,live⁸⁶

Access file details (name, size, type) :

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

Instant preview of dropped images

• Simple "drag images and instant preview"example  :  http://jsbin.com/ewarak/2/edit#html,live⁸⁹ 
   
• 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 (Webkit only). 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#html,live⁹⁰

Simple examples

• The most simple example, draw a red filled rectangle in a canvas :  http://jsbin.com/utihaq/2/edit#html,live⁹⁵
• Simple example of drawing into a canvas with different colors, widths, shapes :  http://jsbin.com/apihec/2/edit#html,live⁹⁶
• Draw lines and play with line attributes lineWidth, lineJoin, lineCap :  http://jsbin.com/iwaqit/2/edit#html,live⁹⁷
• Use paths, try the context.closePath() function : http://jsbin.com/elurad/2/edit#html,live⁹⁸
• Draw a circle, play with styles, closePath()... :  http://jsbin.com/iyecom/2/edit#html,live⁹⁹
• Draw some text :  http://jsbin.com/ivazub/4/edit#html,live¹⁰⁰
• For more complex shapes (quadratic and bezier curves), see http://www.html5canvastutorials.com/...dratic-curves/¹⁰¹ and http://www.html5canvastutorials.com/...bezier-curves/¹⁰²
• Draw arrows in a canvas :
  •  http://jsbin.com/xodawu/4/edit¹⁰³, code from http://www.dbp-consulting.com/tutori...nvasArrow.html¹⁰⁴
  • Another example that allows specifying a thickness to the arrow, code is simpler too: http://jsbin.com/xodawu/6/edit¹⁰⁵

Shadows

• Draw a rectangle with shadows :  http://jsbin.com/oqeyip/2/edit#html,live¹⁰⁶

Gradients

• This example shows a gradiant of colors :  http://jsbin.com/urucem/3/edit#html,live¹⁰⁷

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

• This example shows an example of clipping using a triangle shape  :  http://jsbin.com/iqipov/2/edit#html,live¹⁰⁸, this example is borrowed from 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¹¹⁰
• Same example as previous except that we draw only when the mouse is pressed: http://jsbin.com/idegay/19/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#html,live¹¹²

Draw a canvas into other canvases (use of drawImage with a canvas instead of an image)

• http://jsbin.com/ziheri/6/edit¹¹³

Images

• Simple image loading and drawing in a canvas :  http://jsbin.com/emixuc/4/edit#html,live¹¹⁴
• Use an image as a pattern for drawing shapes :  http://jsbin.com/etufab/3/edit#html,live¹¹⁵, another example here : http://jsbin.com/utihaq/5/edit#html,live¹¹⁶

2D Transformations

Resource : http://tutorials.jenkov.com/html5-canvas/transformation.html¹¹⁷

• 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#html,live¹¹⁸

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#html,live¹¹⁹

Animation using requestWindowFrame()

• See how to perform fast animation in a canvas : http://jsbin.com/imisah/2/edit#html¹²⁰, example borrowed and adapted from http://html5demo.braincracking.org/news/canvas.php¹²¹

Access pixels inside a canvas

Resource : http://tutorials.jenkov.com/html5-canvas/pixels.html¹²²

• Draw noise in a canvas, example that shows individual access to canvas's pixels :  http://jsbin.com/ikanur/3/edit#html,live¹²³
• 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.
• Very impressive demonstration of a minecraft-like 3D renderer that uses canvas at a pixel level: http://jsfiddle.net/uzMPU/¹²⁵

Canvas drawing modes

Canvas modes are "global" settings that decide how the things you draw will be merged with the actual canvas content. Default is "added" : you draw a red line, result will be a red line ! Some modes are very useful like "destination-out" that makes transparent eveything you draw : draw a red line, il will erase the canvas with the shape of the line !

• Excellent tutorial about canvas modes :  http://tutorials.jenkov.com/html5-canvas/composition.html¹²⁶

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#html,live¹²⁸
• Use external buttons to control the video player :  http://jsbin.com/irofib/5/edit#html,live¹²⁹
• 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¹³⁰

Take snapshot of a video

• Use canvas to draw current image displayed by a <video> element: http://jsbin.com/uburuh/2/edit#html,live¹³¹

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

• Change size on the fly :  http://jsbin.com/uretal/3/edit#html,live¹³²
• Change video size and rotation when the mouse is over it :  http://jsbin.com/ahunon/4/edit#html,live¹³³
• Video player with controls for zooming, panning, rotating : http://jsbin.com/axonek/edit#html,live¹³⁴
• Rotating video :  http://jsbin.com/unaqej/4/edit#html,live¹³⁵ , 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>.

• Dynamic injection of content in a video :  http://ajaxian.com/archives/dynamic-content-injection-with-html5-canvas-and-video¹³⁷ 
   
• 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/237/edit¹⁴⁷

Apply CSS effects on a video element with live webcam

•  Try this example that shows how to use the getUserMedia API, note that CSS effects (clic on video) work only in chrome 19+:  http://jsbin.com/ivefis/34/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/5/edit#html,live¹⁴⁹ 

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/¹⁵¹

The <audio> element 

• Simple example : http://jsbin.com/itaros/2/edit#html,live¹⁵²
• Same example with custom controls :  http://jsbin.com/uvusob/2/edit¹⁵³

What sound format does your browser supports ?

• http://html5demo.braincracking.org/demo/audio.php¹⁵⁴
• http://www.jplayer.org/HTML5.Audio.Support/¹⁵⁵

Audio Data and Web Audio API

Resources :

• Excellent presentation : http://slides.agektmr.com/webaudio_basic/english.html¹⁵⁶
• Web Sound part of this impressive presentation by Google :  http://www.htmlfivewow.com¹⁵⁷
• http://www.html5rocks.com/en/tutorials/webaudio/intro/¹⁵⁸
• Specification : https://dvcs.w3.org/hg/audio/raw-fil...ification.html¹⁵⁹

Generate synthetic sound

Chrome latest of Safari nightly build only !

• This small example generates a A at 440Hz. http://jsbin.com/abesul/5/edit#html,live¹⁶⁰

Real time sound analysis and how to add sound effects in real time (reverb, delay, etc.)

Chrome latest of Safari nightly build only !

•  Nice demo (with downloadable sources) by master students from the university of Nice, France. This demo takes some time for loading a song (about 1 minute if slow bandwith, take your time...), then displays real time animation based on the analysis of the sound + adds reverb and delay effects. :  http://goo.gl/92REu¹⁶¹.
  • Tech report about this demo (in french : http://goo.gl/rrM6a¹⁶²)

Real time mixing 12 tracks at the same time

• A very impressive demo. Loads in Ajax 12 sound files, then mixes them using different audioContext nodes (for panning, volume, etc.). Takes a long time to load, if slow bandwidth, try this at home ! http://kevincennis.com/mix/¹⁶³

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" in the top left of the small windows that shows hightlighted code below, copy the source in a testWebSocket.html file, open it in your browser. It will send a message to html5rocks.websocket.org/echo  (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.

</pre>
<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("Hello World!");
                alert("Sending: 'Hello World from WWW2012' to ws://html5rocks.websocket.org/echo using WebSockets!");
            };
            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                alert("Message just received from WS echo server:" + " '" + 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>


<div id="sse">
    <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>

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-participant applications over WebSockets. This tutorial uses the NowJS ¹⁶⁷library that provides ditributed JavaScript objects + 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 WebSockets (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.

A real time action game that uses WebSockets, canvas, Box2D.js for physics

• Developped by master students from University of Nice, France, during the HTML5 course. Use NodeJS + socket.io + NowJS + Bow2D.js. The game uses the Box2D.js lib for physic simulation (same used by Angry Birds) both on client and server side. A NodeJS Server application written in JavaScript is doing all physics computations and clients use the same library locally. When messages take too long to arrive to clients, objects follow predicted trajectories.  Two players can play at the same time, others are spectators. try it there : http://futchball.madjawa.net/¹⁷⁰  Sources downloadable from game page.
• Video of this game running :  http://www.youtube.com/<wbr/>watch?v=VsK9ljw6JvE¹⁷¹

Simple example

• Displays longitude and latitude :  http://jsbin.com/ezivih/2/edit#html,live¹⁷³

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#html,live¹⁷⁴
• Displays position on a interactive google map :  http://jsbin.com/ovehuj/3/edit#html,live¹⁷⁵
• Example that use the google map reverse geocoder to get the address from longitude and latitude: http://jsbin.com/ukogoq/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¹⁷⁷