SVG stands for Scalable Vector Graphics. It’s a text based graphic language which draws images using text, lines, dots etc. This makes it lightweight and renders faster.
|Here’s it’s like draw and remember. In other words any shape drawn by using SVG can be remembered and manipulated and browser can render it again.||Canvas is like draw and forget. Once something is drawn you cannot access that pixel and manipulate it.|
|SVG is good for creating graphics like CAD software’s where once something is drawn the user wants to manipulate it.||Canvas is good for draw and forget scenarios like animation and games.|
|This is slow as it needs to remember the co-ordinates for later manipulations.||This is faster as there is no intention of remembering things later.|
|We can have event handler associated with the drawing object.||Here we cannot associate event handlers with drawing objects as we do not have reference of them.|
|Resolution independent.||Resolution dependent.|
Canvas is an HTML area on which you can draw graphics.
Define the canvas area
So to define canvas area you need to use the below HTML code. This defines the area on which you can draw.
Hide Copy Code <canvas height=""500"" id=""mycanvas"" solid="" style=""border:1px" width=""600""></canvas>
Get access to canvas area
To draw on the canvas area we need to first get reference of the context section. Below is the code for canvas section.
Hide Copy Code
var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");
Draw the graphic
Now once you have access to the context object we can start drawing on the context. So first call the “move” method and start from a point , use line method and draw the line and then apply stroke over it.
Hide Copy Code
<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>
HTML5’s Geolocation API lets users share their physical location with chosen web sites.
he Geolocation API works with a new property of the global
A Geolocation object can be created as follows:
var geolocation = navigator.geolocation;
Below are more details of the HTML 5 elements which form the page structure.
- <header>: Represents header data of HTML.
- <footer>: Footer section of the page.
- <nav>: Navigation elements in the page.
- <article>: Self-contained content.
- <section>: Used inside article to define sections or group content in to sections.
Datalist element in HTML 5 helps to provide autocomplete feature in a textbox as shown below.
<input list="Country"> <datalist id="Country"> <option value="India"> <option value="Italy"> <option value="Iran"> <option value="Israel"> <option value="Indonesia"> </datalist>
There are 10 important new form elements introduced in HTML 5:-
Output element is needed when you need calculation from two inputs to be summarized in to a label.
var country = localStorage.getItem("Key0011");