Table Of Content

HTML5 About the Tutorial HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice. Audience This tutorial has been designed for beginners in HTML5 to make them understand the basic-to-advanced concepts of the subject. Prerequisites Before starting this tutorial, you should have a basic understanding of HTML and its tags. Disclaimer & Copyright  Copyright 2016 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute, or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness, or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] 1 HTML5 Execute HTML5 Online For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your HTML5 programs at the spot and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box − <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorials Point</title> </head> <body> <header role="banner"> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <footer> <p>Created by <a href="http://tutorialspoint.com/">Tutorials Point</a></p> </footer> </body> </html> 2 HTML5 Table of Contents About the Tutorial ................................................................................................................................... 1 Audience ................................................................................................................................................. 1 Prerequisites ........................................................................................................................................... 1 Execute HTML5 Online ............................................................................................................................ 2 Table of Contents .................................................................................................................................... 3 1. HTML5 − OVERVIEW ............................................................................................................ 9 Browser Support ..................................................................................................................................... 9 New Features .......................................................................................................................................... 9 Backward Compatibility ........................................................................................................................ 10 2. HTML5 − SYNTAX ............................................................................................................... 11 The DOCTYPE ........................................................................................................................................ 11 Character Encoding ............................................................................................................................... 11 The <script> tag ..................................................................................................................................... 11 The <link> tag ........................................................................................................................................ 12 HTML5 Elements ................................................................................................................................... 12 HTML5 Attributes .................................................................................................................................. 12 HTML5 Document ................................................................................................................................. 13 3. HTML5 − ATTRIBUTES ........................................................................................................ 16 Standard Attributes ............................................................................................................................... 16 Custom Attributes ................................................................................................................................. 17 4. HTML5 − EVENTS ............................................................................................................... 18 5. HTML5 − WEB FORMS 2.0 ................................................................................................. 21 The <input> element in HTML4 ............................................................................................................. 21 The <input> element in HTML5 ............................................................................................................. 22 3 HTML5 HTML5 - datetime ................................................................................................................................. 23 HTML5 - datetime local ......................................................................................................................... 24 HTML5 – date ........................................................................................................................................ 24 HTML5 – month..................................................................................................................................... 25 HTML5 - week ....................................................................................................................................... 26 HTML5 – time ........................................................................................................................................ 27 HTML5 – number ................................................................................................................................... 27 HTML5 – range ...................................................................................................................................... 28 HTML5 - email ....................................................................................................................................... 29 HTML5 – URL ......................................................................................................................................... 30 The <output> element ........................................................................................................................... 30 The placeholder attribute...................................................................................................................... 31 The autofocus attribute ........................................................................................................................ 32 The required attribute ........................................................................................................................... 33 6. HTML5 − SVG ..................................................................................................................... 35 Viewing SVG Files .................................................................................................................................. 35 Embedding SVG in HTML5 ..................................................................................................................... 35 HTML5 − SVG Circle ............................................................................................................................... 36 HTML5 − SVG Rectangle ........................................................................................................................ 36 HTML5 − SVG Line ................................................................................................................................. 37 HTML5 − SVG Ellipse .............................................................................................................................. 38 HTML5 − SVG Polygon ........................................................................................................................... 39 HTML5 − SVG Polyline ........................................................................................................................... 40 HTML5 − SVG Gradients ........................................................................................................................ 40 HTML5 − SVG Star ................................................................................................................................. 42 4 HTML5 7. HTML5 − MATHML ............................................................................................................ 44 MathML Examples ................................................................................................................................ 44 Using MathML Characters ..................................................................................................................... 45 Matrix Presentation Examples .............................................................................................................. 47 8. HTML5 − WEB STORAGE .................................................................................................... 49 Session Storage ..................................................................................................................................... 49 Local Storage ......................................................................................................................................... 50 Delete Web Storage .............................................................................................................................. 51 9. HTML5 − WEB SQL DATABASE ........................................................................................... 54 The Core Methods ................................................................................................................................. 54 Opening Database ................................................................................................................................. 54 Executing queries .................................................................................................................................. 55 INSERT Operation .................................................................................................................................. 55 READ Operation .................................................................................................................................... 55 Final Example ........................................................................................................................................ 56 10. HTML5 − SERVER SENT EVENTS ......................................................................................... 58 Web Application for SSE ........................................................................................................................ 58 Server Side Script for SSE....................................................................................................................... 59 Handle Server-Sent Events .................................................................................................................... 60 11. HTML5 − WEBSOCKETS ..................................................................................................... 61 WebSocket Attributes ........................................................................................................................... 61 WebSocket Events ................................................................................................................................. 62 WebSocket Methods ............................................................................................................................. 62 WebSocket Example .............................................................................................................................. 62 Client Side HTML & JavaScript Code ...................................................................................................... 62 5 HTML5 Install pywebsocket .............................................................................................................................. 64 Start the Server ..................................................................................................................................... 64 12. HTML5 − CANVAS .............................................................................................................. 65 The Rendering Context .......................................................................................................................... 66 Browser Support ................................................................................................................................... 66 HTML5 Canvas Examples ....................................................................................................................... 66 HTML5 Canvas - Drawing Rectangles ..................................................................................................... 67 HTML5 Canvas - Drawing Paths ............................................................................................................. 69 HTML5 Canvas - Drawing Lines .............................................................................................................. 71 HTML5 Canvas - Drawing Bezier Curves ................................................................................................. 76 HTML5 Canvas - Drawing Quadratic Curves ........................................................................................... 78 HTML5 Canvas - Using Images ............................................................................................................... 81 HTML5 Canvas - Create Gradients ......................................................................................................... 83 HTML5 Canvas - Styles and Colors ......................................................................................................... 87 HTML5 Canvas - Text and Fonts ............................................................................................................. 91 HTML5 Canvas - Pattern and Shadow .................................................................................................... 93 HTML5 Canvas - Save and Restore States .............................................................................................. 97 HTML5 Canvas - Translation ................................................................................................................ 100 HTML5 Canvas - Rotation .................................................................................................................... 103 HTML5 Canvas - Scaling ....................................................................................................................... 105 HTML5 Canvas - Transforms ................................................................................................................ 108 HTML5 Canvas - Composition .............................................................................................................. 111 HTML5 Canvas - Animations ................................................................................................................ 115 13. HTML5 − AUDIO & VIDEO ................................................................................................ 118 Embedding Video ................................................................................................................................ 118 Video Attribute Specification .............................................................................................................. 119 6 HTML5 Embedding Audio ................................................................................................................................ 120 Audio Attribute Specification .............................................................................................................. 121 Handling Media Events........................................................................................................................ 121 Configuring Servers for Media Type .................................................................................................... 123 14. HTML5 − GEOLOCATION .................................................................................................. 124 Geolocation Methods .......................................................................................................................... 124 Geolocation getCurrentPosition() API ................................................................................................. 125 Geolocation watchPosition() API ......................................................................................................... 127 Geolocation clearWatch() API ............................................................................................................. 129 Location Properties ............................................................................................................................. 131 Handling Errors ................................................................................................................................... 132 Position Options .................................................................................................................................. 133 15. HTML5 − MICRODATA ..................................................................................................... 135 Example .............................................................................................................................................. 135 Global Attributes ................................................................................................................................. 136 Properties Datatypes........................................................................................................................... 136 Microdata API support ........................................................................................................................ 137 Defining Microdata Vocabulary ........................................................................................................... 137 16. HTML5 − DRAG & DROP .................................................................................................. 139 Drag and Drop Events .......................................................................................................................... 139 The DataTransfer Object: .................................................................................................................... 140 Drag and Drop Process ........................................................................................................................ 141 17. HTML5 − WEB WORKERS ................................................................................................. 145 What is Web Workers?........................................................................................................................ 146 How Web Workers Work? ................................................................................................................... 147 7 HTML5 Stopping Web Workers ....................................................................................................................... 148 Handling Errors ................................................................................................................................... 148 Checking for Browser Support ............................................................................................................. 149 18. HTML5 – INDEXEDDB ...................................................................................................... 151 19. HTML5 − WEB MESSAGING ............................................................................................. 159 20. HTML5 − CORS ................................................................................................................ 162 21. HTML5 − WEB RTC........................................................................................................... 166 8 1. HTML5 − Overview HTML5 HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. Browser Support The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. New Features HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.  New Semantic Elements: These are like <header>, <footer>, and <section>.  Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.  Persistent Local Storage: To achieve without resorting to third-party plugins.  WebSocket : A next-generation bidirectional communication technology for web applications.  Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).  Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.  Audio & Video: You can embed audio or video on your webpages without resorting to third-party plugins.  Geolocation: Now visitors can choose to share their physical location with your web application. 9

Description:
For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your HTML5 programs at the spot and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box −. . .
ebook img

HTML5 Canvas Examples PDF

169 Pages·2016·1.71 MB·English
by  Amit Raj
Save to my drive
Quick download
Download
Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview HTML5 Canvas Examples

HTML5 About the Tutorial HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice. Audience This tutorial has been designed for beginners in HTML5 to make them understand the basic-to-advanced concepts of the subject. Prerequisites Before starting this tutorial, you should have a basic understanding of HTML and its tags. Disclaimer & Copyright  Copyright 2016 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute, or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness, or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] 1 HTML5 Execute HTML5 Online For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your HTML5 programs at the spot and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box − <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorials Point</title> </head> <body> <header role="banner"> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <footer> <p>Created by <a href="http://tutorialspoint.com/">Tutorials Point</a></p> </footer> </body> </html> 2 HTML5 Table of Contents About the Tutorial ................................................................................................................................... 1 Audience ................................................................................................................................................. 1 Prerequisites ........................................................................................................................................... 1 Execute HTML5 Online ............................................................................................................................ 2 Table of Contents .................................................................................................................................... 3 1. HTML5 − OVERVIEW ............................................................................................................ 9 Browser Support ..................................................................................................................................... 9 New Features .......................................................................................................................................... 9 Backward Compatibility ........................................................................................................................ 10 2. HTML5 − SYNTAX ............................................................................................................... 11 The DOCTYPE ........................................................................................................................................ 11 Character Encoding ............................................................................................................................... 11 The <script> tag ..................................................................................................................................... 11 The <link> tag ........................................................................................................................................ 12 HTML5 Elements ................................................................................................................................... 12 HTML5 Attributes .................................................................................................................................. 12 HTML5 Document ................................................................................................................................. 13 3. HTML5 − ATTRIBUTES ........................................................................................................ 16 Standard Attributes ............................................................................................................................... 16 Custom Attributes ................................................................................................................................. 17 4. HTML5 − EVENTS ............................................................................................................... 18 5. HTML5 − WEB FORMS 2.0 ................................................................................................. 21 The <input> element in HTML4 ............................................................................................................. 21 The <input> element in HTML5 ............................................................................................................. 22 3 HTML5 HTML5 - datetime ................................................................................................................................. 23 HTML5 - datetime local ......................................................................................................................... 24 HTML5 – date ........................................................................................................................................ 24 HTML5 – month..................................................................................................................................... 25 HTML5 - week ....................................................................................................................................... 26 HTML5 – time ........................................................................................................................................ 27 HTML5 – number ................................................................................................................................... 27 HTML5 – range ...................................................................................................................................... 28 HTML5 - email ....................................................................................................................................... 29 HTML5 – URL ......................................................................................................................................... 30 The <output> element ........................................................................................................................... 30 The placeholder attribute...................................................................................................................... 31 The autofocus attribute ........................................................................................................................ 32 The required attribute ........................................................................................................................... 33 6. HTML5 − SVG ..................................................................................................................... 35 Viewing SVG Files .................................................................................................................................. 35 Embedding SVG in HTML5 ..................................................................................................................... 35 HTML5 − SVG Circle ............................................................................................................................... 36 HTML5 − SVG Rectangle ........................................................................................................................ 36 HTML5 − SVG Line ................................................................................................................................. 37 HTML5 − SVG Ellipse .............................................................................................................................. 38 HTML5 − SVG Polygon ........................................................................................................................... 39 HTML5 − SVG Polyline ........................................................................................................................... 40 HTML5 − SVG Gradients ........................................................................................................................ 40 HTML5 − SVG Star ................................................................................................................................. 42 4 HTML5 7. HTML5 − MATHML ............................................................................................................ 44 MathML Examples ................................................................................................................................ 44 Using MathML Characters ..................................................................................................................... 45 Matrix Presentation Examples .............................................................................................................. 47 8. HTML5 − WEB STORAGE .................................................................................................... 49 Session Storage ..................................................................................................................................... 49 Local Storage ......................................................................................................................................... 50 Delete Web Storage .............................................................................................................................. 51 9. HTML5 − WEB SQL DATABASE ........................................................................................... 54 The Core Methods ................................................................................................................................. 54 Opening Database ................................................................................................................................. 54 Executing queries .................................................................................................................................. 55 INSERT Operation .................................................................................................................................. 55 READ Operation .................................................................................................................................... 55 Final Example ........................................................................................................................................ 56 10. HTML5 − SERVER SENT EVENTS ......................................................................................... 58 Web Application for SSE ........................................................................................................................ 58 Server Side Script for SSE....................................................................................................................... 59 Handle Server-Sent Events .................................................................................................................... 60 11. HTML5 − WEBSOCKETS ..................................................................................................... 61 WebSocket Attributes ........................................................................................................................... 61 WebSocket Events ................................................................................................................................. 62 WebSocket Methods ............................................................................................................................. 62 WebSocket Example .............................................................................................................................. 62 Client Side HTML & JavaScript Code ...................................................................................................... 62 5 HTML5 Install pywebsocket .............................................................................................................................. 64 Start the Server ..................................................................................................................................... 64 12. HTML5 − CANVAS .............................................................................................................. 65 The Rendering Context .......................................................................................................................... 66 Browser Support ................................................................................................................................... 66 HTML5 Canvas Examples ....................................................................................................................... 66 HTML5 Canvas - Drawing Rectangles ..................................................................................................... 67 HTML5 Canvas - Drawing Paths ............................................................................................................. 69 HTML5 Canvas - Drawing Lines .............................................................................................................. 71 HTML5 Canvas - Drawing Bezier Curves ................................................................................................. 76 HTML5 Canvas - Drawing Quadratic Curves ........................................................................................... 78 HTML5 Canvas - Using Images ............................................................................................................... 81 HTML5 Canvas - Create Gradients ......................................................................................................... 83 HTML5 Canvas - Styles and Colors ......................................................................................................... 87 HTML5 Canvas - Text and Fonts ............................................................................................................. 91 HTML5 Canvas - Pattern and Shadow .................................................................................................... 93 HTML5 Canvas - Save and Restore States .............................................................................................. 97 HTML5 Canvas - Translation ................................................................................................................ 100 HTML5 Canvas - Rotation .................................................................................................................... 103 HTML5 Canvas - Scaling ....................................................................................................................... 105 HTML5 Canvas - Transforms ................................................................................................................ 108 HTML5 Canvas - Composition .............................................................................................................. 111 HTML5 Canvas - Animations ................................................................................................................ 115 13. HTML5 − AUDIO & VIDEO ................................................................................................ 118 Embedding Video ................................................................................................................................ 118 Video Attribute Specification .............................................................................................................. 119 6 HTML5 Embedding Audio ................................................................................................................................ 120 Audio Attribute Specification .............................................................................................................. 121 Handling Media Events........................................................................................................................ 121 Configuring Servers for Media Type .................................................................................................... 123 14. HTML5 − GEOLOCATION .................................................................................................. 124 Geolocation Methods .......................................................................................................................... 124 Geolocation getCurrentPosition() API ................................................................................................. 125 Geolocation watchPosition() API ......................................................................................................... 127 Geolocation clearWatch() API ............................................................................................................. 129 Location Properties ............................................................................................................................. 131 Handling Errors ................................................................................................................................... 132 Position Options .................................................................................................................................. 133 15. HTML5 − MICRODATA ..................................................................................................... 135 Example .............................................................................................................................................. 135 Global Attributes ................................................................................................................................. 136 Properties Datatypes........................................................................................................................... 136 Microdata API support ........................................................................................................................ 137 Defining Microdata Vocabulary ........................................................................................................... 137 16. HTML5 − DRAG & DROP .................................................................................................. 139 Drag and Drop Events .......................................................................................................................... 139 The DataTransfer Object: .................................................................................................................... 140 Drag and Drop Process ........................................................................................................................ 141 17. HTML5 − WEB WORKERS ................................................................................................. 145 What is Web Workers?........................................................................................................................ 146 How Web Workers Work? ................................................................................................................... 147 7 HTML5 Stopping Web Workers ....................................................................................................................... 148 Handling Errors ................................................................................................................................... 148 Checking for Browser Support ............................................................................................................. 149 18. HTML5 – INDEXEDDB ...................................................................................................... 151 19. HTML5 − WEB MESSAGING ............................................................................................. 159 20. HTML5 − CORS ................................................................................................................ 162 21. HTML5 − WEB RTC........................................................................................................... 166 8 1. HTML5 − Overview HTML5 HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. Browser Support The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. New Features HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.  New Semantic Elements: These are like <header>, <footer>, and <section>.  Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.  Persistent Local Storage: To achieve without resorting to third-party plugins.  WebSocket : A next-generation bidirectional communication technology for web applications.  Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).  Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.  Audio & Video: You can embed audio or video on your webpages without resorting to third-party plugins.  Geolocation: Now visitors can choose to share their physical location with your web application. 9

Description:
For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your HTML5 programs at the spot and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box −. . .
See more

The list of books you might like

Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.
DMCA & Copyright: Dear all, most of the website is community built, users are uploading hundred of books everyday, which makes really hard for us to identify copyrighted material, please contact us if you want any material removed.
Copyright @ PDFdrive.to, 2022 | We love our users