HTML 5 Graphics Components

HTML 5 Provides two graphic Components:

  • SVG

HTML 5 Canvas :

  1. Canvas is used to draw graphics on web.
  2. It is basically the container of the graphicsF

Example :

  1. <canvas id=“mycan”width=”200″ height=”100″></canvas>
  2. var c = document.getElementById(“mycan”);
  3. var ctx = c.getContext(“2d”);
  4. ctx.moveTo(0, 0);
  5. ctx.lineTo(200, 100);
  6. ctx.stroke();


  • Scalable Vector Graphics
  • The HTML <svg>element is a container for SVG graphics.
  • <svgwidth=”100″ height=”100″>
    <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
  • <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
    style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />

HTML 5 API tutorial for beginners


  • HTML5 Geolocation API
  • It is used to Locate the User’s Position
  • The HTML Geolocation API is used to get the geographical position of a user.
  • Since this can compromise privacy,
  • User will have to give permission in order to get his/her location

We use navigator.geolocation.getCurrentPosition to get the user location

2) HTML 5 Drag and Drop

  • You can “grab” an object and drag it to a different location.
  • Any element in HTML 5 can be drag and drop
  • First make Draggable attribute to true of the html element
  • <img draggable=”true”>
  • There are two things :
  • What to drag Where to drag

Example of Drag and Drop:

<div id=”divdrop” ondrop=”dropevtn(event)” ondragover=”allowDrop(event)”></div>

<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>

3) HTML 5 Web Storage

  • It is used to store the user data locally
  • Earlier we use cookies to store data in which we can only store limited amount of data
  • With web storage large amount of data can be stored without any performance effect and also it is more secure
  • 5mb of data can be stored
  • Cookies can store very less data

Two types of Web Storage:

  • window.localStorage- stores data with no expiration date
  • window.sessionStorage- stores data for one session (data is lost when the browser tab is closed)
  • Store item in localstorage
  • localStorage.setItem(“subject”,“maths”);
  • Retrieve items from local storage
  • localStorage.getItem(“subject”);

4) Web Workers in HTML 5:

  • A web worker is a JavaScript that runs in the background independently of other scripts, without affecting the performance of the page.
  • You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Example :

w = new Worker(“latest_workers.js”);

5) Server Side Events :

  • To update the page automatically from the server
  • The server sends messages automatically to update the page
  • One way messaging




HTML 5 Introduction:

  • HTML5 is the latest and most enhanced version of HTML.
  • HTML is not a programming language, but rather a markup language.
  • HTML 5  is the advanced version of HTML 4.01, XHTML 1.0, and XHTML 1.1 and has superseded all  these versions.

HTML 5 Features:

  • The DOCTYPE declaration for HTML5
  • <!DOCTYPE html>
  • The character encoding (charset) declaration is also very simple:
  • <meta charset=”UTF-8″>
  • HTML 5 removes extra information required and you can use simply following syntax −
  • <script src = “scriptfile.js”></script>
  • The type attribute is already removed from elements.
  • Like from <link type=“text/css” > the type is removed from stylesheet.

HTML 5 Elements :

  • New semantic elementslike <header>, <footer>, <article>, and <section>.
  • New attributes of form elementslike number, date, time, calendar, and range.
  • New graphic elements: <svg> and <canvas>.
  • New multimedia elements: <audio> and <video>.
  • aside− This tag represents a piece of content that is only slightly related to the rest of the page.
  • header− This tag represents the header of a section.
  • footer− This tag can contain information about the author, copyright information, et cetera.
  • nav− This tag represents a section of the document intended for navigation.
  • dialog− This tag can be used to mark up a conversation.
  • figure− This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
  • section− This tag represents application section. It can be used together with h1-h6 to indicate the document structure.
  • article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article

Structure of HTML 5 Page

  • <!DOCTYPE html>
  • <html>
  • <head> <meta charset = “utf-8”> <title>…</title>
  • </head>
  • <body>
  • <header>…</header>
  • <nav>…</nav>
  • <article> <section> … </section> </article> <aside>…</aside>
  • <footer>…</footer>
  • </body> </html>

HTML 5 Compatibility with IE 8 and prior versions:

  • You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
  • The HTML5Shiv is placed within the <head> tag.
  • The HTML5Shiv is a javascript file that is referenced in a <script> tag.
  • You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.

HTML 5 New Input types

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week