Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

Friday, September 13, 2013

How to block ads in website. Remove ads from website.

सफ्टवेयर राखेर पनि वेबसाइट र मेसेन्जरहरुमा आउने विज्ञापन रोक्न सकिन्छ 


इन्टरनेट चलाउनेहरुलाई विभिन्न वेबसाइट खोल्दा आउने विज्ञापनहरुले हैरान नै पारेको हुनुपर्छ। कम्प्युटर तथा मोबाइलको स्क्रिन नै ढाक्ने गरेर ढकमक्क देखिने विज्ञापनहरुले वेबसाइटमा रहेका सामग्री हेर्न मात्र मुस्किल पार्दैनन् तल माथि र दायाँ बायाँ एकोनास हल्लीरहने विज्ञापनले ध्यान पनि भंग गराउँछन्। यती मात्र होइन वेबसाइट हेर्नेहरुले गल्तीले क्लिक गरोस् भनेर नै सामग्रीहरुको लिंकमा टाँसेरै विज्ञापन राख्नेहरु पनि धेरै छन्। जसले गर्दा तपाइँ आफूले हेर्न चाहेको विषय भन्दा फरक लिंक र ठाउँमा पुग्नुहुन्छ। यसले दिने हैरानी त छँदैछ यस्ता विज्ञापनले तपाइँको इन्टरनेटको गती सुस्तो बनाएर हैरान बनाउँछन्। वेबसाइटहरु धेरै ढिलो खुल्दा तपाइँलाई रिस उठ्नु पनि स्वभाविक नै हो। कतिपय नेपाली वेबसाइटमा छ ठूला ठूला आकारका र पाठकको आँखालाई ख्यालै नगरी डिजाइन गरिएका भद्दा विज्ञापनको संख्या पनि धेरै नै हुन्छ। जसले आँखालाई असजिलो त पार्छ नै इन्टरनेटको गती पनि सुस्तो हुन्छ। भोल्युम बेस इन्टरनेट लिनेलाई त त्यस्ता विज्ञापनले अनावश्यक धेरै पैसा पनि खर्च गराउँछ।

इन्टरनेट प्रयोगका क्रममा दैनिक साक्षात्कार हुने यस्ता विज्ञापन र तिनले दिने हैरानीबाट जोगिन प्रमुख इन्टरनेट ब्राउजरहरुमा यस्ता विज्ञापन रोक्ने एडअन्स (सफ्टवेयर)हरु पनि विकास भएका छन्। जसले तपाइँलाई त्यस्ता विज्ञापन जसले फोकटमा पैसा खान्छन् र हैरानी दिन्छन् तीनलाई सँधैका लागि बाइबाइ गर्न सक्नुहुन्छ सित्तैमा। प्रमुख पाँच इन्टरनेट ब्राउजरमा यस्ता खालका एडअन एप राख्न सक्नुहुन्छ।


Install ABP Ad Blocker


Sunday, April 7, 2013

Add Zoom Hover Effect To Blogger Images, Zoom Effect on Image for Website

This is pure CSS tutorial,it will help you to make your blog attractive,if you are running photography blog then this effect is best for you.

Whenever any one mouse-over the image the image will automatically grow in size and after removing mouse it will come back in its own position.


If you want to add this effect to your blog then follow below steps-

Adding CSS Code

Paste the following Css code above ]]></b:skin> in your blog html code section.If you don't know how to paste Css then go to Template>Edit HTML>And there find (ctrl + f) ]]></b:skin> and paste following code above it.


.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}

Now we need to add image,select image in blogger where you want to add this effect and follow below steps-

<a class="hovergallery" href="Image-URL"><img src=" Image-URL " /></a>

Replace Image-URL with your image in which you want zoom hover effect.

After Adding Image URL place the code where you want to display this image.

If You Are Facing Any Problem Feel Free To Ask By Commenting below.

Sunday, March 17, 2013

Mozilla Firefox Browser

The Firefox Browser

Firefox Firefox is a free, open-source web browser from Mozilla.
Firefox is one of the most popular internet browsers today.
Firefox is available for Windows, Mac OS X, Linux, and Android.
Download Firefox


Firefox Statistics

The following table is a breakdown of the Firefox numbers from our Browsers Statistics:
2013 Total FF 21 FF 20 FF 19 FF 18 FF 17 FF 16 FF*
February 29.6% 0.1% 0.2% 4.6% 16.0% 1.2% 1.2% 6.3%
January 30.2% 0.1% 0.6% 12.4% 8.3% 1.6% 7.2%
2012 Total FF 17 FF 16 FF 15 FF 14 FF 13 FF 12 FF 11 FF 9-10 FF 4-8 FF 3.6 FF*
December 31.1% 16.3% 5.6% 1.3% 1.0% 0.7% 1.1% 0.6% 1.2% 1.2% 0.8% 1.3%
November 31.2% 2.5% 19.4% 1.8% 1.2% 0.8% 1.2% 0.6% 1.3% 1.3% 0.8% 0.3%
October 31.8% 0.4% 9.5% 12.4% 1.8% 1.0% 1.4% 0.8% 1.4% 1.6% 1.0% 0.5%
September 32.2% 0.8% 17.7% 4.8% 1.3% 1.6% 1.0% 1.6% 1.9% 1.2% 0.3%
August 32.8% 1.9% 20.3% 2.1% 1.8% 1.1% 1.7% 2.1% 1.2% 0.7%
July 33.7% 0.3% 7.4% 15.2% 3.0% 1.3% 2.1% 2.4% 1.5% 0.5%
June 34.4% 0.6% 12.1% 12.5% 1.6% 2.3% 2.7% 1.8% 0.8%
May 35.2% 0.1% 0.8% 21.4% 3.8% 2.7% 3.4% 2.3% 0.7%
April 35.8% 0.1% 2.6% 21.6% 3.8% 3.8% 3.1% 0.8%
March 36.3% 0.3% 9.1% 17.3% 5.0% 3.7% 0.9%
February 37.1% 0.1% 0.6% 24.2% 6.5% 4.3% 1.4%
January 37.1% 0.1% 18.6% 12.4% 5.0% 1.1%
2011 Total FF 9 FF 8 FF 7 FF 6 FF 5 FF 4 FF 3.6 FF 3.5 FF 3.0 FF*
December 37.7% 1.8% 22.8% 2.1%  1.5% 1.2% 1.3% 5.6% 0.6% 0.5% 0.3%
November 38.1% 0.4% 12.7% 11.5%  2.2% 1.5% 1.5% 6.9% 0.6% 0.5% 0.3%
October 38.7% 0.6% 19.8%  5.1% 2.0% 1.8% 7.9% 0.7% 0.5% 0.3%
September 39.7% 1.5%  22.2% 3.1% 2.2% 9.0% 0.7% 0.7% 0.3%
August 40.6% 9.5% 15.9% 2.9% 10.3% 0.8% 0.8% 0.4%
July 42.0% 0.6% 23.2% 4.6% 11.5% 0.9% 0.9% 0.3%
June 42.2% 5.6% 21.5% 12.3% 1.5% 0.9% 0.4%
May 42.4% 0.3% 23.4% 15.6% 1.8% 1.0% 0.3%
April 42.9% 15.7% 23.8% 2.1% 1.1% 0.2%
March 42.2% 5.2% 32.9% 2.5% 1.3% 0.3%
February 42.4% 1.9% 35.8% 2.9% 1.5% 0.3%
January 42.8% 1.5% 36.1% 3.1% 1.7% 0.4%
2010 Total FF 4 FF 3.6 FF 3.5 FF 3.0 FF*
December 43.5% 1.1% 36.5% 3.5% 2.0% 0.4%
November 44.0% 0.8% 36.9% 3.8% 2.0% 0.5%
October 44.4% 0.7% 36.2% 4.5% 2.4% 0.6%
September 45.1% 0.8% 35.3% 5.6% 2.9% 0.5%
August 45.8% 0.6% 35.2% 6.1% 3.1% 0.6%
July 46.4% 0.4% 34.5% 7.3% 3.6% 0.6%
June 46.6% 32.7% 9.1% 4.0% 0.8%
May 46.9% 31.7% 10.0% 4.4% 0.8%
April 46.4% 29.4% 11.5% 4.6% 0.9%
March 46.2% 22.1% 17.6% 5.6% 0.9%
February 46.5% 10.5% 28.5% 6.5% 1.0%
January 46.3% 2.2% 34.2% 8.6% 1.3%
2009 Total FF 3.5 FF 3.0 FF 2.0 FF*
December 46.4% 33.3% 11.2% 1.2% 0.7%
November 47.0% 31.4% 13.6% 1.5% 0.5%
October 47.5% 29.8% 15.7% 1.6% 0.4%
September 46.6% 27.3% 17.2% 1.8% 0.3%
August 47.4% 21.0% 24.0% 1.9% 0.5%
July 47.9% 12.1% 33.3% 1.9% 0.6%
June 47.3% 1.2% 43.4% 2.3% 0.4%
May 47.7% 44.3% 2.9% 0.5%
April 47.1% 43.4% 2.8% 0.9%
March 46.5% 42.2% 3.0% 1.3%
February 46.4% 41.5% 3.8% 1.1%
January 45.5% 39.5% 4.6% 1.4%
2008 Total FF 3.0 FF 2.0 FF 1.5 Moz
December 44.7% 38.1% 6.2% 0.1% 0.3%
November 44.6% 35.9% 8.0% 0.3% 0.4%
October 44.5% 34.9% 8.7% 0.4% 0.5%
September 43.1% 31.9% 10.1% 0.6% 0.5%
August 44.2% 25.5% 17.5% 0.7% 0.5%
July 43.1% 20.7% 21.1% 0.8% 0.5%
June 41.5% 8.9% 31.2% 0.9% 0.5%
May 40.5% 2.9% 35.9% 1.0% 0.7%
FF* indicates other versions of Firefox.


Firefox 18

Firefox 18 was released on 8th January, 2013.
Firefox 18 is available for Windows, Mac OS X (Snow Leopard, Lion, and Mountain Lion), Linux, and Android.
New features:
  • IonMonkey - New JavaScript compiler (7% - 26% faster than Firefox 17)
  • Support for Retina displays
  • Inline PDF viewer
  • Preliminary support for Web Real Time Communication (WebRTC)

Firefox 17

Firefox 17 was released on 20th November, 2012.
Firefox 17 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Updated Awesome Bar - with larger icons
  • Tab animations
  • Social API - Allows you to sign in to your social networks (Facebook) via your browser
  • Implemented Click-To-Play blocklisting - to prevent vulnerable plugin versions from running without the user's permission
  • New Markup Panel For HTML/DOM in Page Inspector
  • HTML5 sandbox attribute (for iframes) implemented
  • Support for Mountain Lion’s Notification Center

Firefox 16

Firefox 16 was released on 09th October, 2012.
Firefox 16 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Native support for PDFs
  • New Developer Toolbar (lets you access the Web Console, Inspector and Debugger + the toolbar itself supports some commands)
  • VoiceOver support for OS X
  • Web App Support (start using apps in the Mozilla app directory)
  • Incremental Garbage Collection (speeds up your browser - recycles/reuses memory that a JavaScript program is no longer using)
  • CSS3 Animations, Transitions, Transforms and Gradients unprefixed in Firefox 16

Firefox 15

Firefox 15 was released on 28th August, 2012.
Firefox 15 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Seamless background updates
  • Stopped most memory leaks caused by add-ons
  • Support for the SPDY networking protocol v3
  • WebGL enhancements
  • HTML5 - Support for the media attribute in <source>
  • HTML5 - Support for the played attribute in <audio> and <video>
  • CSS3 - Support for the CSS word-break property
  • Faster debugger
  • New design tool that allows web developers to switch between desktop and mobile views of sites
  • Native support for the Opus audio codec

Firefox 14

Firefox 14 was released on 17th July, 2012.
Firefox 14 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Privacy feature - Firefox now encrypts your Google searches using HTTPS
  • Bug fix - Full screen support for Mac OS X Lion
  • Security feature - You can now whitelist sites that you visit often and trust

Firefox 13

Firefox 13 was released on 05th June, 2012.
Firefox 13 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • The default home page now has quicker access to bookmarks, history, settings, etc.
  • When opening a new tab, users are now presented with their most visited pages
  • SPDY protocol now enabled by default for faster browsing on supported sites
  • 72 total improvements to Page Inspector, HTML panel, Style Inspector, Scratchpad and Style Editor
  • Implemented support for the following CSS properties: column-fill, CSS3 background-position
  • Support for the :invalid pseudo-class
  • The CSS3 <angle> type unit is now supported

Firefox 12

Firefox 12 was released on 24th April, 2012.
Firefox 12 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Windows: Firefox is now easier to update with one less prompt (User Account Control)
  • Page Source now has line numbers
  • Line breaks are now supported in the title attribute
  • Support for the text-align-last CSS property

Firefox 11

Firefox 11 was released on 13th March, 2012.
Firefox 11 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Style Editor - A new stylesheet editor. Visit any page, then select Style Editor from the Web Developer menu
  • "Tilt" 3D Page Structure View -  The Inspector tool now offers a "3D" button
  • Support for the CSS text-size-adjust property (controls how mobile devices size text and show scrollbars when zooming into a web page)
  • Support for the outerHTML property
  • Firefox can now migrate your bookmarks, history, and cookies from Google Chrome
  • HTML5 tags are correctly highlighted when viewing the source
  • Files can be stored in IndexedDB.
  • The moz prefix has been removed from the Websockets API

Firefox 10

Firefox 10 was released on 31st January, 2012.
Firefox 10 is available for Windows, Mac OS X, Linux, and Android.
New features:
  • Page Inspector/CSS Inspector - lets developers inspect the HTML and CSS
  • Scratchpad -  A code editor that highlights syntax for JavaScript developers
  • New 3D graphics capabilities and anti-aliasing for WebGL content
  • Full-Screen API - enables developers to create full screen apps and games and deliver full screen video content
  • Support for CSS 3D Transforms

Firefox 9

Firefox 9 was released on 20th December, 2011.
Firefox 9 is available for Windows, Mac OS X and Linux.
New features:
  • Added Type Inference; improving JavaScript performance (up to 30% faster than Firefox 8)
  • Improved theme integration for Mac OS X Lion
  • Added two finger swipe navigation for Mac OS X Lion
  • Added support for querying "Do Not Track" status via JavaScript
  • Added support for CSS3 font-stretch
  • Improved support for HTML5, MathML, and CSS

Firefox 8

Firefox 8 was released on 08th November, 2011.
Firefox 8 is available for Windows, Mac OS X and Linux.
New features:
  • Twitter search engine installed by default
  • Third-party add-ons are disabled by default
  • A new "add-on selection dialog" allows to verify add-ons on upgrading
  • Tabs can be loaded "on demand" (making it much faster to restore windows with many tabs)
  • Support for Cross-Origin Resource Sharing (CORS), which lets developers load WebGL textures from other domains in a secure way
  • HTML5 context menu support
  • Firefox for Android: Mozilla has also added further functionality for the Firefox browser into Android devices

Firefox 7

Firefox 7 was released on 27th September, 2011.
Firefox 7 is available for Windows, Mac OS X and Linux.
New features:
  • Improved memory handling
  • Bookmark and password changes now sync almost instantly when using Firefox Sync
  • The "http://" URL prefix is now hidden by default (just like Chrome)
  • Updated the WebSocket protocol from version 7 to version 8
  • Added a system for users to send performance data back to Mozilla

Firefox 6

Firefox 6 was released on 16th August, 2011.
Firefox 6 is available for Windows, Mac OS X and Linux.
New features:
  • The address bar now highlights the domain of the website you're visiting
  • Streamlined the look of the site identity block
  • Added support for the latest draft version of WebSockets with a prefixed API
  • Added support for EventSource / server-sent events
  • Added support for window.matchMedia
  • Added Scratchpad, an interactive JavaScript prototyping environment
  • Added a new Web Developer menu item and moved development-related items into it
  • Improved usability of the Web Console
  • Improved the discoverability of Firefox Sync
  • Reduced browser startup time when using Panorama

Firefox 5

Firefox 5 was released in June, 2011.
Firefox 5 is available for Windows, Mac OS X and Linux.
New features:
  • Added support for CSS animations
  • Tuned HTTP idle connection logic for increased performance
  • Improved canvas, JavaScript, memory, and networking performance
  • Improved standards support for HTML5, XHR, MathML, SMIL, and canvas
  • Improved spell checking
  • Improved desktop environment integration for Linux users
  • WebGL content can no longer load cross-domain textures
  • Background tabs have setTimeout and setInterval clamped to 1000ms to improve performance

Firefox 4

Firefox 4 was released in March 2011.
Firefox 4 is available for Windows, Mac OS X and Linux.
New features:
  • Available in over 80 languages!
  • Fastest Firefox Ever - Firefox is up to six times faster than the previous release.
  • App Tabs - A permanent home to frequently visited sites like Web mail, Twitter, Pandora, Flickr.
  • Switch to Tab - Easily find and switch to any open tab from your Awesome Bar without opening duplicate tabs.
  • Panorama - Drag and drop tabs into manageable groups to save time while navigating many open tabs.
  • Firefox Sync - Access your Awesome Bar history, bookmarks, open tabs, passwords and form data across multiple computers and mobile devices.
  • New Add-ons Manager - More than 200,000 add-ons to customize the features, functionality and look of Firefox.
  • Do Not Track - Allows users to opt-out of tracking used for behavioral advertising.
  • Privacy first - Prevent others from accessing your browser history.
  • HTTP Strict Transport Security (HSTS) - Establishes secure connections to stop “man in the middle” attacks and keep sensitive data safe.
  • Content Security Policy (CSP) - Prevents cross-scripting attacks by allowing sites to explicitly tell the browser which content is legitimate.
  • JägerMonkey JIT compiler - along with enhancements to the existing TraceMonkey JIT and SpiderMonkey’s interpreter for faster page-load speed and better performance.
  • HTML5 support - Includes hardware accelerated, high-definition video (WebM), 3D graphics, offline data storage, professional typography, touchscreen interfaces and the Mozilla Audio API.
  • Improves existing tools - like CSS, Canvas and SVG.
  • Uninterrupted browsing - when there is a crash in the Adobe Flash, Apple QuickTime or Microsoft Silverlight plugins.

Firefox 3.6

Firefox 3.6 was released in January 2010.
Firefox 3.6 is built on Mozilla's Gecko 1.9.2 web rendering platform, which has been under development since early 2009 and contains many improvements for web developers, add-on developers, and users. This version is also faster and more responsive than previous versions and has been optimized to run on small device operating systems such as Maemo.
New features:
  • Personas theme - allow users to change Firefox's appearance with a single click
  • Protection from out-of-date plugins - keep users safer as they browse
  • Open, native video can be displayed full screen and supports poster frames
  • Improved JavaScript performance
  • Ability for web developers to run asynchronously scripts - to speed up page load times
  • Support for downloadable web fonts - using the new WOFF font format
  • Improved support for CSS3, DOM, and HTML5

Older Firefox Versions

Firefox 3.5 - Released in June 2009.
Firefox 3.0 - Released in June 2008.
Firefox 2.0 - Released in December 2006.
Firefox 1.5 - Released in November 2005.
Firefox 1.0 - Released in November 2004.

Friday, March 15, 2013

HTML5 - Drag and Drop

Drag and drop is a part of the HTML5 standard.

Drag and Drop

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
Note: Drag and drop does not work in Safari 5.1.2.

HTML5 Drag and Drop Example

The example below is a simple drag and drop example:
It might seem complicated, but lets go through all the different parts of a drag and drop event.

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true">

What to Drag - ondragstart and setData()

Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()

Do the Drop - ondrop

When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Code explained:
  • Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
  • Get the dragged data with the dataTransfer.getData("Text") method. This method will return any data that was set to the same type in the setData() method
  • The dragged data is the id of the dragged element ("drag1")
  • Append the dragged element into the drop element

Wednesday, March 13, 2013

HTML5 Inline SVG

HTML5 has support for inline SVG.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C recommendation

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:
  • SVG images can be created and edited with any text editor
  • SVG images can be searched, indexed, scripted, and compressed
  • SVG images are scalable
  • SVG images can be printed with high quality at any resolution
  • SVG images are zoomable (and the image can be zoomed without degradation)

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.

Embed SVG Directly Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML page:

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas SVG
  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games
  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game applications

Thursday, March 7, 2013

HTML5 Canvas

The <canvas> element is used to draw graphics, on the fly, on a web page.
Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:
 
What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one HTML page.
To add a border, use the style attribute:

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

Example

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Example explained:
First, find the <canvas> element:
var c=document.getElementById("myCanvas"); 
Then, call its getContext() method (you must pass the string "2d" to the getContext() method):

var ctx=c.getContext("2d"); 
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

The next two lines draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75); 
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

New Elements in HTML5

The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999.
Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. These elements are removed or re-written in HTML5.

To better handle today's internet use, HTML5 also includes new elements for better structure, better form handling, drawing, and for media content.

New Semantic/Structural Elements

HTML5 offers new elements for better structure:
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break


New Media Elements

HTML5 offers new elements for media content:
Tag Description
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>


The new <canvas> Element

Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)


New Form Elements

HTML5 offers new form elements, for more functionality:
Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation


Removed Elements

The following HTML 4.01 elements are removed from HTML5:
  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

What is HTML5? HTML5 Introduction.

  • HTML5 will be the new standard for HTML.
  • The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.
  • HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

How Did HTML5 Get Started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

The HTML5 <!DOCTYPE>

In HTML5 there is only one <!doctype> declaration, and it is very simple:
<!DOCTYPE html>

Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
            The content of the document......
</body>
</html>

HTML5 - New Features

Some of the most interesting new features in HTML5:
  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

Browser Support for HTML5

HTML5 is not yet an official standard, and no browsers have full HTML5 support.

But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.