Interview Quest

From CodephpOnline Wiki
Jump to navigation Jump to search

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.

SVG Canvas
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 navigator object.

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:-

  1. Color.
  2. Date
  3. Datetime-local
  4. Email
  5. Time
  6. Url
  7. Range
  8. Telephone
  9. Number
  10. Search

Output element is needed when you need calculation from two inputs to be summarized in to a label. 

localStorage.setItem("Key001","India");

var country = localStorage.getItem("Key0011");