Category: html5

HTML5 – Validator ”; Previous Next Print Page Previous Next Advertisements ”;

HTML – URL Encoding ”; Previous Next URL encoding is the practice of translating unprintable characters or characters with special meaning within URLs to a representation that is unambiguous and universally accepted by web browsers and servers. These characters include − ASCII control characters − Unprintable characters typically used for output control. Character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal). A complete encoding table is given below. Non-ASCII control characters − These are characters beyond the ASCII character set of 128 characters. This range is part of the ISO-Latin character set and includes the entire “top half” of the ISO-Latin set 80-FF hex (128-255 decimal). A complete encoding table is given below. Reserved characters − These are special characters such as the dollar sign, ampersand, plus, common, forward slash, colon, semi-colon, equals sign, question mark, and “at” symbol. All of these can have different meanings inside a URL so need to be encoded. A complete encoding table is given below. Unsafe characters − These are space, quotation marks, less than symbol, greater than symbol, pound character, percent character, Left Curly Brace, Right Curly Brace, Pipe, Backslash, Caret, Tilde, Left Square Bracket, Right Square Bracket, Grave Accent. These character present the possibility of being misunderstood within URLs for various reasons. These characters should also always be encoded. A complete encoding table is given below. The encoding notation replaces the desired character with three characters: a percent sign and two hexadecimal digits that correspond to the position of the character in the ASCII character set. Example One of the most common special characters is a white space. You can”t type a space in a URL directly. A space position in the character set is 20 hexadecimals. So you can use %20 in place of a space when passing your request to the server. http://www.example.com/new%20pricing.htm This URL actually retrieves a document named “new pricing.htm” from the www.example.com ASCII Control Characters Encoding This includes the encoding for character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal) Decimal Hex Value Character URL Encode 0 00   %00 1 01   %01 2 02   %02 3 03   %03 4 04   %04 5 05   %05 6 06   %06 7 07   %07 8 08 backspace %08 9 09 tab %09 10 0a linefeed %0a 11 0b   %0b 12 0c   %0c 13 0d carriage return %0d 14 0e   %0e 15 0f   %0f 16 10   %10 17 11   %11 18 12   %12 19 13   %13 20 14   %14 21 15   %15 22 16   %16 23 17   %17 24 18   %18 25 19   %19 26 1a   %1a 27 1b   %1b 28 1c   %1c 29 1d   %1d 30 1e   %1e 31 1f   %1f 127 7f   %7f Non-ASCII control characters encoding This includes the encoding for the entire “top half” of the ISO-Latin set 80-FF hex (128255 decimal.) Decimal Hex Value Character URL Encode 128 80 € %80 129 81  %81 130 82 ‚ %82 131 83 ƒ %83 132 84 „ %84 133 85 … %85 134 86 † %86 135 87 ‡ %87 136 88 ˆ %88 137 89 ‰ %89 138 8a Š %8a 139 8b ‹ %8b 140 8c Œ %8c 141 8d  %8d 142 8e Ž %8e 143 8f  %8f 144 90  %90 145 91 ‘ %91 146 92 ’ %92 147 93 “ %93 148 94 ” %94 149 95 • %95 150 96 – %96 151 97 — %97 152 98 ˜ %98 153 99 ™ %99 154 9a š %9a 155 9b › %9b 156 9c œ %9c 157 9d  %9d 158 9e ž %9e 159 9f Ÿ %9f 160 a0   %a0 161 a1 ¡ %a1 162 a2 ¢ %a2 163 a3 £ %a3 164 a4 ¤ %a4 165 a5 ¥ %a5 166 a6 ¦ %a6 167 a7 § %a7 168 a8 ¨ %a8 169 a9 © %a9 170 aa ª %aa 171 ab « %ab 172 ac ¬ %ac 173 ad ­ %ad 174 ae ® %ae 175 af ¯ %af 176 b0 ° %b0 177 b1 ± %b1 178 b2 ² %b2 179 b3 ³ %b3 180 b4 ´ %b4 181 b5 µ %b5 182 b6 ¶ %b6 183 b7 · %b7 184 b8 ¸ %b8 185 b9 ¹ %b9 186 ba º %ba 187 bb » %bb 188 bc ¼ %bc 189 bd ½ %bd 190 be ¾ %be 191 bf ¿ %bf 192 c0 À %c0 193 c1 Á %c1 194 c2  %c2 195 c3 à %c3 196 c4 Ä %c4 197 c5 Å %c5 198 c6 Æ %v6 199 c7 Ç %c7 200 c8 È %c8 201 c9 É %c9 202 ca Ê %ca 203 cb Ë %cb 204 cc Ì %cc 205 cd Í %cd 206 ce Î %ce 207 cf Ï %cf 208 d0 Ð %d0 209 d1 Ñ %d1 210 d2 Ò %d2 211 d3 Ó %d3 212 d4 Ô %d4 213 d5 Õ %d5 214 d6 Ö %d6 215 d7 × %d7 216 d8 Ø %d8 217 d9 Ù %d9 218 da Ú %da 219 db Û %db 220 dc Ü %dc 221 dd Ý %dd 222 de Þ %de 223 df ß %df 224 e0 à %e0 225 e1 á %e1 226 e2 â %e2 227 e3 ã %e3 228 e4 ä %e4 229 e5 å %e5 230 e6 æ %e6 231 e7 ç %e7 232 e8 è %e8 233 e9 é %e9 234 ea ê %ea 235 eb ë %eb 236 ec ì %ec 237 ed í %ed 238 ee î %ee 239 ef ï %ef 240 f0 ð %f0 241 f1 ñ %f1 242 f2 ò %f2 243 f3 ó %f3 244 f4 ô %f4 245 f5 õ %f5 246 f6 ö %f6 247 f7 ÷ %f7 248 f8 ø %f8 249 f9 ù %f9 250 fa ú %fa 251 fb û

HTML – Video Player ”; Previous Next HTML Local Video player HTML features, include native video support without the need for Flash. Below player works based HTML, CSS and Java Script. You can drag and drop your local Video files into the container. Example Let”s look at the following example, where we are going to allow the user to upload the local video file <!DOCTYPE html> <html> <head> <style> body { background-color: #E8DAEF; text-align: center; } </style> </head> <body> <input type=”file” accept=”video/*”> <br> <video controls height=”300″ width=”500″></video> <script> (function localFileVideoPlayer() { ”WELCOME” var x = function(event) { var vid = this.files[0] var a = window.a || window.webkitURL var y = a.createObjectURL(vid) var videoNode = document.querySelector(”video”) videoNode.src = y } var z = document.querySelector(”input”) z.addEventListener(”change”, x, false) })() </script> </body> </html> When we run the above code, it will generate an output displaying the video controls allowing the user to upload the local video file on the webpage. Screen Capture Below recorder works based on html, CSS and java Script. Before enter into this page, user must be allow camera accessibility to cost images Example Consider the following example, where we are going to use the user camera and capture the image <html> <head> <style> body { text-align: center; background-color: #EAFAF1; } </style> </head> <body> <video id=”vid” controls autoplay></video> <canvas id=”mytutorial” width=”600″ height=”300″ style=”border:1px solid #d3d3d3;”></canvas> <button id=”snapshot”>Take Picture</button> <script> const x = document.getElementById(”vid”); const mycanvas = document.getElementById(”mytutorial”); const y = mycanvas.getContext(”2d”); const clickpicture = document.getElementById(”snapshot”); const a = { video: true, }; clickpicture.addEventListener(”click”, () => { y.drawImage(x, 1, 0, mycanvas.width, mycanvas.height); }); navigator.mediaDevices.getUserMedia(a).then((stream) => { x.srcObject = stream; }); </script> </body> </html> On running the above code, the output window will pop up, displaying the canvas along with a capture a button on the webpage. Print Page Previous Next Advertisements ”;

HTML – Drag and Drop API ”; Previous Next Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks and movements. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. To achieve drag and drop functionality with traditional HTML4, developers either have to use complex JavaScript programming or other JavaScript frameworks like jQuery etc. Now, HTML5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. It is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc. Making an Element Draggable To make a element draggable, we have to set draggable attribute to true. For example, <div draggable=”true”> Drag and Drop Events There are number of events which are fired during various stages of the drag and drop operation. These events are listed below Events Description dragstart Fires when the user starts dragging of the object. dragenter Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. dragover This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. dragleave This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback. drag Fires every time the mouse is moved while the object is being dragged. drag The drop event is fired on the element where the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. dragend Fires when the user releases the mouse button while dragging an object. Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation. The DataTransfer Object The event listener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer. The event.dataTransfer returns DataTransfer object associated with the event as follows function EnterHandler(event) { DataTransfer dt = event.dataTransfer; …………. } The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set in terms of various attributes associated with DataTransfer object as explained below Attribute Description dataTransfer.dropEffect [ = value ] Returns the kind of operation that is currently selected. This attribute can be set, to change the selected operation. The possible values are none, copy, link, and move. dataTransfer.effectAllowed [ = value ] Returns the kinds of operations that are to be allowed. This attribute can be set, to change the allowed operations. The possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized. dataTransfer.types Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string “Files”. dataTransfer.clearData ( [ format ] ) Removes the data of the specified formats. Removes all data if the argument is omitted. dataTransfer.setData(format, data) Adds the specified data. data = dataTransfer.getData(format) Returns the specified data. If there is no such data, returns the empty string. dataTransfer.files Returns a FileList of the files being dragged, if any. dataTransfer.setDragImage(element, x, y) Uses the given element to update the drag feedback, replacing any previously specified feedback. dataTransfer.addElement(element) Adds the given element to the list of elements used to render the drag feedback. Drag and Drop Process Following are the steps to be carried out to implement Drag and Drop operation Step 1 – Making an Object Draggable Here are steps to be taken If you want to drag an element, you need to set the draggable attribute to true for that element. Set an event listener for dragstart that stores the data being dragged. The event listener dragstart will set the allowed effects (copy, move, link, or some combination). Following is the example to make an object draggable <!DOCTYPE html> <html> <head> <style type=”text/css”> #boxA, #boxB { float: left; padding: 10px; margin: 10px; -moz-user-select: none; } #boxA { background-color: #6633FF; width: 75px; height: 75px; } #boxB { background-color: #FF6699; width: 150px; height: 150px; } </style> <script type=”text/javascript”> function dragStart(ev) { ev.dataTransfer.effectAllowed = ”move”; ev.dataTransfer.setData(“Text”, ev.target.getAttribute(”id”)); ev.dataTransfer.setDragImage(ev.target, 0, 0); return true; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div> Try to drag the purple box around. </div> <div id=”boxA” draggable=”true” ondragstart=”return dragStart(event)”> <p>Drag Me</p> </div> <div id=”boxB”>Dustbin</div> </center> </body> </html> Step 2 – Handle dropping of the Object To accept a drop, the drop target has to listen to at least three events. The dragenter event, which is used to determine

HTML – Character Encodings ”; Previous Next Character encoding is a method of converting bytes into characters. To validate or display an HTML document properly, a program must choose a proper character encoding. HTML Charset Attribute The HTML charset attribute of meta tag is used to mention character encoding of webpage. <meta charset=”UTF-8″> The ASCII Character Set The most common character set or character encoding in use on computers is ASCII (The American Standard Code for Information Interchange), and this is probably the most widely used character set for encoding text electronically. ASCII encoding consist of 128 characters(0-127). English Alphabets (A-Z and a-z) Numbers(0-9) Special Characters (@, #, $, %, etc) You can have a look at complete set of Printable ASCII Characters The ANSI Character Set ANSI character set is generally used in windows systems, it is also called as windows-1252. This includes From 0 to 127 ANSI follows ASCII characters. From 128 to 159 some extra special characters are added. From 160 to 255 it”s identical to UTF-8. The ISO-8859-1 Character Set ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. Same as ASCII for the first 128 characters Does not use the characters from 128 to 159 Same as ANSI and UTF-8 from 160 to 255 The UTF-8 Character Set The HTML5 specifications recommends developers to use UTF-8 encodings in webpages, because UTF-8 covers all character and symbols in the world. The characters of UTF-8 are. Identical to ASCII for 0 to 127 characters Characters 128 to 159 are empty Uses same characters as ANSI and 8859-1 from 160 to 255 Characters from other language are specified using 256 to 1000 The International Standards Organization created a range of character sets to deal with different national characters. For the documents in English and most other Western European languages, the widely supported encoding ISO-8859-1 is used. ISO Character Sets Here is the list of Character Set being used around the world along with their description. Character Set Description ISO-8859-1 Latin alphabet part 1 Covering North America,Western Europe, Latin America, theCaribbean, Canada, Africa ISO-8859-2 Latin alphabet part 2 Covering Eastern Europe ISO-8859-3 Latin alphabet part 3 Covering SE Europe, Esperanto, miscellaneous others ISO-8859-4 Latin alphabet part 4 Covering Scandinavia/Baltics (and others not in ISO-8859-1) ISO-8859-5 Latin/Cyrillic alphabet part 5 ISO-8859-6 Latin/Arabic alphabet part 6 ISO-8859-7 Latin/Greek alphabet part 7 ISO-8859-8 Latin/Hebrew alphabet part 8 ISO-8859-9 Latin 5 alphabet part 9 Same as ISO-8859-1 except Turkish characters replace Icelandic ones ISO-8859-10 Latin 6 Latin 6 Lappish, Nordic, and Eskimo ISO-8859-15 The same as ISO-8859-1 but with more characters added ISO-2022-JP Latin/Japanese alphabet part 1 ISO-2022-JP-2 Latin/Japanese alphabet part 2 ISO-2022-KR Latin/Korean alphabet part 1 The Unicode Consortium was then set up to devise a way to show all characters of different languages, rather than have these different incompatible character codes for different languages. Therefore, if you want to create documents that use characters from multiple character sets, you will be able to do so using the single Unicode character encodings. Unicode therefore specifies encodings that can deal with a string in special ways so as to make enough space for the huge character set it encompasses. These are known as UTF8, UTF-16, and UTF-32. UTF Character Sets Character Set Description UTF-8 A Unicode Translation Format that comes in 8-bit units that is, it comes in bytes. A character in UTF8 can be from 1 to 4 bytes long, making UTF8 variable width. UTF-16 A Unicode Translation Format that comes in 16-bit units that is, it comes in shorts. It can be 1 or 2 shorts long, making UTF16 variable width. UTF-32 A Unicode Translation Format that comes in 32-bit units that is, it comes in longs. It is a fixed-width format and is always 1 “long” in length. The first 256 characters of Unicode character sets correspond to the 256 characters of ISO-8859-1. By default, HTML 4 processors should support UTF-8, and XML processors are supposed to support UTF-8 and UTF-16; therefore all XHTML-compliant processors should also support UTF-16. Print Page Previous Next Advertisements ”;

HTML5 – Tags Reference ”; Previous Next A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated in HTML5. Tag Description <!–…–> Specifies a comment <!DOCTYPE> Specifies the document type <a> Specifies an anchor <abbr> Specifies an abbreviation <acronym> Deprecated:Specifies an acronym <address> Specifies an address element <applet> Deprecated: Specifies an applet <area> Specifies an area inside an image map <article> New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article <aside> New Tag:Specifies a piece of content that is only slightly related to the rest of the page. <audio> New Tag:Specifies an audio file. <base> Specifies a base URL for all the links in a page <basefont> Deprecated: Specifies a base font <bdo> Specifies the direction of text display <bgsound> Specifies the background music <blink> Specifies a text which blinks <blockquote> Specifies a long quotation <body> Specifies the body element <br> Inserts a single line break <button> Specifies a push button <canvas> New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. <caption> Specifies a table caption <center> Deprecated: Specifies centered text <col> Specifies attributes for table columns  <colgroup> Specifies groups of table columns <command> New Tag:Specifies a command the user can invoke. <comment> Puts a comment in the document <datalist> New Tag:Together with the a new list attribute for input can be used to make comboboxes <dd> Specifies a definition description <del> Specifies deleted text <details> New Tag:Specifies additional information or controls which the user can obtain on demand. <dir> Deprecated: Specifies a directory list <div> Specifies a section in a document <dl> Specifies a definition list <dt> Specifies a definition term <embed> New Tag:Defines external interactive content or plugin. <fieldset> Specifies a fieldset <figure> New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. <b> Specifies bold text <big> Deprecated:Specifies big text <i> Specifies italic text <small> Specifies small text <tt> Deprecated:Specifies teletype text <font> Deprecated: Specifies text font, size, and color <footer> New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera. <form> Specifies a form  <frame> Deprecated:Specifies a sub window (a frame) <frameset> Deprecated:Specifies a set of frames <head> Specifies information about the document <header> New Tag:Specifies a group of introductory or navigational aids. <hgroup> New Tag:Specifies the header of a section. <h1> to <h6> Specifies header 1 to header 6 <hr> Specifies a horizontal rule <html> Specifies an html document <isindex> Deprecated: Specifies a single-line input field <iframe> Specifies an inline sub window (frame) <ilayer> Specifies an inline layer <img> Specifies an image <input> Specifies an input field <ins> Specifies inserted text <keygen> New Tag:Specifies control for key pair generation. <keygen> Generate key information in a form <label> Specifies a label for a form control <layer> Specifies a layer <legend> Specifies a title in a fieldset <li> Specifies a list item <link> Specifies a resource reference <map> Specifies an image map  <mark> New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. <marquee> Create a scrolling-text marquee <menu> Deprecated: Specifies a menu list <meta> Specifies meta information <meter> New Tag:Specifies a measurement, such as disk usage. <multicol> Specifies a multicolumn text flow <nav> New Tag:Specifies a section of the document intended for navigation. <nobr> No breaks allowed in the enclosed text <noembed> Specifies content to be presented by browsers that do not support the <embed>tag <noframes> Deprecated:Specifies a noframe section <noscript> Specifies a noscript section <object> Specifies an embedded object <ol> Specifies an ordered list <optgroup> Specifies an option group <option> Specifies an option in a drop-down list <output> New Tag:Specifies some type of output, such as from a calculation done through scripting. <p> Specifies a paragraph <param> Specifies a parameter for an object <cite> Specifies a citation <code> Specifies computer code text <dfn> Specifies a definition term <em> Specifies emphasized text  <kbd> Specifies keyboard text <samp> Specifies sample computer code <strong> Specifies strong text <var> Specifies a variable <plaintext> Deprecated: Render the raminder of the document as preformatted plain text <pre> Specifies preformatted text <progress> New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations. <q> Specifies a short quotation <ruby> New Tag:Together with <rt> and <rp> allow for marking up ruby annotations. <script> Specifies a script <section> New Tag:Represents a generic document or application section. <select> Specifies a selectable list <spacer> Specifies a white space <span> Specifies a section in a document <s> Deprecated: Specifies strikethrough text <strike> Deprecated: Specifies strikethrough text <style> Specifies a style definition <sub> Specifies subscripted text <sup> Specifies superscripted text <table> Specifies a table <tbody> Specifies a table body <td> Specifies a table cell <textarea> Specifies a text area <tfoot> Specifies a table footer <th> Specifies a table header <thead> Specifies a table header <time> New Tag:Specifies a date and/or time. <title> Specifies the document title <tr> Specifies a table row <u> Deprecated: Specifies underlined text <ul> Specifies an unordered list <video> New Tag:Specifies a video file. <wbr> New Tag:Specifies a line break opportunity. <wbr> Indicate a potential word break point within a <nobr> section <xmp> Deprecated: Specifies preformatted text Print Page Previous Next Advertisements ”;

HTML – QR Code ”; Previous Next A QR is an abbreviation, stands for Quick Response code which is a form of 2-D matrix barcode. If we take a closer look at a QR Code closely, we will clearly see that it consists of black squares on a white background. It can store various types of data including phone numbers, URLs of a website and any type of text up to 4000 characters. The below QR Generator tool has been developed specifically for the readers of tutorialspoint. To use this simple tool, simply enter your URL or any characters in the text box and the QR code for that character will be automatically generated. Print Page Previous Next Advertisements ”;

HTML – Canvas ”; Previous Next HTML element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations. Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML attributes like id, name and class, etc. <canvas id=”mycanvas” width=”100″ height=”100″></canvas> You can easily find that <canvas> element in the DOM using getElementById() method as follows − var canvas = document.getElementById(“mycanvas”); Example Let us see a sample example that shows how to use <canvas> element in HTML document. <!DOCTYPE html> <html> <head> <style> #mycanvas{border:1px solid red;} </style> </head> <body> <canvas id=”mycanvas” width=”100″ height=”100″></canvas> </body> </html> The Rendering Context The <canvas> is initially blank, and to display something, a script first needs to access the rendering context. The canvas element has a DOM method called getContext, which is used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d. Instance Following is the code to get required context along with a check if the browser supports <canvas> element − var canvas = document.getElementById(“mycanvas”); if (canvas.getContext){ var ctx = canvas.getContext(”2d”); // drawing code here } else { // canvas-unsupported code here } Browser Support The latest versions of Firefox, Safari, Chrome and Opera all support for HTML Canvas but IE8 does not support canvas natively. You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this JavaScript as follows − <!–[if IE]><script src=”excanvas.js”></script><![endif]–> HTML Canvas – Drawing Rectangles There are three methods that draw rectangles on the canvas − S.No. Method & Description 1 fillRect(x,y,width,height) This method draws a filled rectangle. 2 strokeRect(x,y,width,height) This method draws a rectangular outline. 3 clearRect(x,y,width,height) This method clears the specified area and makes it fully transparent Here x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle and width and height are width and height of the rectangle. Example Following is a simple example which makes use of above mentioned methods to draw a nice rectangle. <!DOCTYPE html> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type=”text/javascript”> function drawShape(){ // Get the canvas element using the DOM var canvas = document.getElementById(”mycanvas”); // Make sure we don”t execute when canvas isn”t supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext(”2d”); // Draw shapes ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } else { alert(”You need Safari or Firefox 1.5+ to see this demo.”); } } </script> </head> <body id=”test” onload=”drawShape();”> <canvas id=”mycanvas”></canvas> </body> </html> HTML Canvas – Drawing Paths We require the following methods to draw paths on the canvas − S.No. Method & Description 1 beginPath() This method resets the current path. 2 moveTo(x, y) This method creates a new subpath with the given point. 3 closePath() This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath. 4 fill() This method fills the subpaths with the current fill style. 5 stroke() This method strokes the subpaths with the current stroke style. 6 arc(x, y, radius, startAngle, endAngle, anticlockwise) Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line. Example Following is a simple example which makes use of above mentioned methods to draw a shape. <!DOCTYPE html> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type=”text/javascript”> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById(”mycanvas”); // Make sure we don”t execute when canvas isn”t supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext(”2d”); // Draw shapes ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); } else { alert(”You need Safari or Firefox 1.5+ to see this demo.”); } } </script> </head> <body id=”test” onload=”drawShape();”> <canvas id=”mycanvas”></canvas> </body> </html> HTML Canvas – Drawing Lines Line Methods We require the following methods to draw lines on the canvas − S.No. Method & Description 1 beginPath() This method resets the current path. 2 moveTo(x, y) This method creates a new subpath with the given point. 3 closePath() This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath. 4 fill() This method fills the subpaths with the current fill style. 5 stroke() This method strokes the subpaths with the current stroke style. 6 lineTo(x, y) This method adds the given point to the current subpath, connected to the previous one by a straight line. Example Following is a simple example which makes use

HTML – Velocity Draw ”; Previous Next The HTML velocity draw is a tool used for creating and manipulating animations on a web page. It has some set of properties like opacity, size and position that control the animation. In the below velocity draw tool, we can draw a variety of visual graphics by changing the position of cursor, opacity and density. To change the opacity and density, drag the circle in the left corner up or down. You can get source code at here Print Page Previous Next Advertisements ”;

HTML – Server Sent Events ”; Previous Next Server Sent Events are a way of sending data from a server to a web page, without requiring the page to refresh or make requests. These events are useful for creating real-time applications, such as chat, news feeds, or notifications. Using SSE, we can push DOM events continuously from our web server to the visitor”s browser. The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling. Server-sent events standardize how we stream data from the server to the client. How to use SSE in Web Application? To use Server-Sent Events in a web application, we need to add an <eventsource> element to the document. The src attribute of <eventsource> element should point to an URL which provides a persistent HTTP connection that sends a data stream containing the events. Furthermore, the URL points to a PHP, PERL or any Python script which would take care of sending event data consistently. Instance Following is a sample HTML code of web application which would expect server time. <!DOCTYPE html> <html> <head> <script type=”text/javascript”> /* Define event handling logic here */ </script> </head> <body> <div id=”sse”> <eventsource src=”/cgi-bin/ticker.cgi” /> </div> <div id=”ticker”> <TIME> </div> </body> </html> Server Side Script for SSE A server side script should send Content-type header specifying the type text/event-stream as follows. print “Content-Type: text/event-streamnn”; After setting Content-Type, server side script would send an Event: tag followed by event name. Following code snippet would send Server-Time as event name terminated by a new line character. print “Event: server-timen”; Final step is to send event data using Data: tag which would be followed by integer of string value terminated by a new line character as follows − $time = localtime(); print “Data: $timen”; Finally, following is complete ticker.cgi written in Perl − #!/usr/bin/perl print “Content-Type: text/event-streamnn”; while(true){ print “Event: server-timen”; $time = localtime(); print “Data: $timen”; sleep(5); } Handle Server-Sent Events Let us modify our web application to handle server-sent events. Following is the final example. <!DOCTYPE html> <html> <head> <script type=”text/javascript”>document.getElementsByTagName(“eventsource”)[0].addEventListener(“server-time”, eventHandler, false); function eventHandler(event) { // Alert time sent by the server document.querySelector(”#ticker”).innerHTML = event.data; } </script> </head> <body> <div id=”sse”> <eventsource src=”/cgi-bin/ticker.cgi” /> </div> <div id=”ticker” name=”ticker”> [TIME] </div> </body> </html> Before testing Server-Sent events, I would suggest that you make sure your web browser supports this concept. Print Page Previous Next Advertisements ”;