the<canvas>tag
<HTML5><canvas>

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In order to leverage the HTML5 Canvas, you’ll need to place the canvas tag somewhere inside your HTML, create an initializer JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.





HTML5 Canvas Template

<!DOCTYPE HTML>
<html>
 <head>
 <script> 
 window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 // do stuff here
 };
 </script>
 </head>
 <body>
 <canvas id="myCanvas" width="578" height="200">
 </canvas>
 </body>
</html>


HTML5 Canvas

Line Examples
To create a line using HTML5 Canvas, we can use the moveTo(), lineTo(), and stroke() methods.

Example code:
window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 context.moveTo(100, 150);
 context.stroke();
};
 context.lineTo(450, 50);





HTML5 Canvas Butt, Round, and Square Line Cap Examples

To add a cap to an HTML5 Canvas line, we can use the lineCap property. Lines can have one of three cap styles: butt, round, or square. Unless otherwise specified, HTML5 Canvas lines are defaulted with the butt cap style

Example code:

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 // butt line cap (top line)
 context.beginPath();
context.moveTo(200, canvas.height / 2 - 50);
 context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
 context.lineWidth = 20;
0000ff"; // line color
 context.strokeStyle = "#context.lineCap = "butt";
 context.stroke();
// round line cap (middle line)
 context.beginPath();
context.moveTo(200, canvas.height / 2);
 context.lineTo(canvas.width - 200, canvas.height / 2);
 context.lineWidth = 20;
0000ff"; // line color
 context.strokeStyle = "#context.lineCap = "round";


context.stroke();
// square line cap (bottom line)
context.beginPath();
 context.moveTo(200, canvas.height / 2 + 50);
 context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
 context.lineWidth = 20;
0000ff"; // line color
 context.strokeStyle = "#context.lineCap = "square";


context.stroke();
};



HTML5 Canvas WebGL Plane Example

To create a WebGL plane with Three.js,
we can instantiate a PlaneGeometry object and define its width along the x-axis and its height along the y-axis.


Example code:

<script src="http://www.html5canvastutorials.com/libraries/Three.js">
</script>
<script>
 window.requestAnimFrame = (function(callback){
 return window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 function(callback){
 window.setTimeout(callback, 1000 / 60);
 };
 })();
 
 function animate(lastTime, angularSpeed, three){
 // update
 var date = new Date();
 var time = date.getTime();
 var timeDiff = time - lastTime;
 var angleChange = angularSpeed * timeDiff * 2 * Math.PI
 / 1000;
 three.plane.rotation.z += angleChange;
 lastTime = time;
 
 // render
 three.renderer.render(three.scene, three.camera);
 
 // request new frame
 requestAnimFrame(function(){
 animate(lastTime, angularSpeed, three);
 });
 }
 
 window.onload = function(){
 var angularSpeed = 0.2; // revolutions per second
 var lastTime = 0;
 
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 
 // camera
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth 
/ window.innerHeight, 1, 1000);
 camera.position.y = -450;
 camera.position.z = 400;
 camera.rotation.x = 45 * (Math.PI / 180);
 
 // scene
 var scene = new THREE.Scene();
 
 // plane
 var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300),
 new THREE.MeshBasicMaterial({
 color: 0x0000ff
 }));
 plane.overdraw = true;
 scene.add(plane);
 
 // create wrapper object that contains three.js objects
 var three = {
 renderer: renderer,
 camera: camera,
 scene: scene,
 plane: plane
 };
 
 animate(lastTime, angularSpeed, three);
 };
</script>
 



  HTML5 Canvas WebGL Cube Example

To create a WebGL cube with Three.js, we can instantiate a CubeGeometry object by defining 
its width along the x-axis, its height along the y-axis, and its depth along the z-axis.


Example code:

<script src="http://www.html5canvastutorials.com/libraries/Three.js">
</script>
<script> 
 (function(callback){
 window.requestAnimFrame = return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 function(callback){
 window.setTimeout(callback, 1000 / 60);
 };
 })();
function animate(lastTime, angularSpeed, three){
// update
 var date = new Date();
 var time = date.getTime();
 var timeDiff = time - lastTime;
 var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
three.cube.rotation.y += angleChange;
 lastTime = time;
 // render three.renderer.render(three.scene, three.camera);
// request new frame
 requestAnimFrame(function(){
 animate(lastTime, angularSpeed, three);
 });
 }
function(){
 window.onload = var angularSpeed = 0.2; // revolutions per second
var lastTime = 0;
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);


 document.body.appendChild(renderer.domElement);
// camera
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
 camera.position.z = 700;// scene
 var scene = new THREE.Scene();
 // cube
 var colors = [0x0000ff, 0x00ff00, 0x00ffff, 0xff0000, 0xff00ff, 0xffff00];
 var materials = [];
 for (var n = 0; n < 6; n++) {
 materials.push([new THREE.MeshBasicMaterial({
 color: colors[n] })]);
 }
 var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
cube.overdraw = true;
 scene.add(cube);  
 // create wrapper object that contains three.js objects var three = {renderer: renderer, camera: camera,
cube: cube scene: scene,
 };


nimate(lastTime, angularSpeed, three);
 };
<a/script>



HTML5 Canvas WebGL Sphere Example

To create a WebGL sphere with Three.js, we can instantiate a SphereGeometry object by defining its radius and detail via the segmentsWidth and segmentsHeight parameters. Increasing the segmentsWidth and segmentsHeight will yield a more perfect sphere and may degrade performance. Decreasing the segmentsWidth and segmentsHeight will yield a less perfect sphere and may help performance.


Example code:

<script src="http://www.html5canvastutorials.com/libraries/Three.js"
</script>
<script>
 function(){
 window.onload =var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
// camera
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;
// scene
 var scene = new THREE.Scene();
// sphere
 var sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 50, 50),
 new THREE.MeshLambertMaterial({
color: 0x0000ff
verdraw = 
 }));
 sphere.
otrue;
 scene.add(sphere);
 // add subtle ambient lighting
 var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
 // add directional light source
 var directionalLight = new THREE.DirectionalLight(0xffffff);
 directionalLight.position.set(1, 1, 1).normalize();
 scene.add(directionalLight);
};
</script>
 renderer.render(scene, camera);
the<audio>tag


HTML5 solves the dependence on external third party plug ins where a user viewing a web page can directly listen to the sound file in the page as soon as the page loads.The user may control the sound stream through the provided control provisions. Currently, three sound formats are playable on HTML 5. These are .Ogg, .MP3 and .WAV.
Currently Internet explorer 8 doesn't support playing sound files but other browsers like Firefox 3.5, Chrome 3.0 and Saafri 3.0 do. Please note that not all browsers support all the given three formats.


Example code:

<html>
  <body>
    <audio src="newsong.ogg" controls="controls">
      <p>Your browser does not support the audio playback. Please upgrade to a modern browser.</p>
    </audio>
  </body>
</html>
the<video>tag

Video tag is symbolized as <video> that is used to define videos including movie clips and other video streams etc. The procedure to insert video is just as similar as image. You can now use it with JavaScript and CSS. The various plug-ins like Flash 

Example code:


<video controls>
<src="video.AVI" type="video/ AVI" /> <!-- WMV for Chrome -->
<src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for FireFox -->
</video>
the<keygen>tag
The <keygen> tag is intended to be used in a form, along with other information which would help in creating a certificate request and after its generation the end result would be a signed certificate.


The tag would cause some sort of selection to be presented to the user of the page for selecting key size and the interface could be a menu, radio buttons, etc.
Using the canvas feature, one can control each and every pixel that is part of it. The element reduces the need to download images or graphics from a server.


This tag is provided to generate keys and to submit the public keys as part of HTML form. The private key is encrypted and stored in the local key database while the public key is packaged and sent to the server for authentication.


Example code:

<html>
  <body>
    <keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
  </body>
</html>