Html5

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 other words, 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.

Here is a simple example using a canvas that can be used to draw two intersecting rectangles.

The following sample code is indicated by.

&lt;script type="text/javascript"&gt;// &lt;![CDATA[

function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb200,0,0)";
 ctx.fillRect (55, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 20, 50);
}

// ]]&gt;&lt;/script&gt;

 &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;

The draw function gets the canvas element, at that point gets the 2d setting. The ctx question would then be able to be utilized to really render to the canvas. The precedent basically fills two square shapes, by setting fillStyle to two unique hues utilizing CSS shading particulars and calling fillRect. The second fillStyle utilizes rgba() to determine an alpha incentive alongside the color.

The beginPath the function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

&lt;html&gt;
 &lt;head&gt;
  &lt;script type="application/javascript"&gt;
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(150, 150);
  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); 
 // &lt;- this is right formula for the image on the right -&gt;
  ctx.lineTo(30, 30);
  ctx.fill();
}
   &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="draw()"&gt;
   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

Today most of the browsers use a flash plugin to play the videos. This works pretty well but Flash, unfortunately, requires a lot of computing power. This would be an issue if the system has a low-end configuration Hence the new web standard HTML5 is trying to change that.
HTML5 has been designed with audio and video codecs which take less processing power its equivalent Flash player which rules the browsers audio and video plugin. As with most new technologies, things are not always clearcut.
HTML5 is the largest ever opensource project undertaken by W3C. Hence we can expect some terrific improvements in processing efficiency from HTML5, it should not be assumed that it will completely replace Flash or even have a critical impact, especially on rich web content. Flash still has many advantages such as.

HTML5, the latest version of HTML series offers a number of unique features that will change the way websites and users interact between them.Even though HTML5 has got many features it has got 5 important features which revolutionize the way users view websites and clearly distinguish them from the previous versions. HTML5 will significantly change the way websites are designed.Search engines will get access to tap into a richer source of information.

Html5

HTML5 canvas element

Canvas Examples-Intersecting rectangles

Canvas Examples -Using Paths

HTML5 vs Flash

5 key features of HTML5