You might use this 
hitpath()
function in an event handler like this:
canvas.onclick = function(event) {
if (hitpath(this.getContext("2d"), event) {
alert("Hit!");  // Click over current path
}
};
Instead of doing path-based hit detection, you can use 
getImageData()
to test whether
the pixel under the mouse point has been painted. If the returned pixel (or pixels) are
fully transparent, nothing has been drawn into that pixel and the mouse event is a miss.
Example 21-12 shows how you can do this kind of hit detection.
Example 21-12. Testing whether a mouse event is over a painted pixel
// Returns true if the specified mouse event is over a nontransparent pixel.
function hitpaint(context, event) {
// Translate and scale mouse event coordinates to canvas coordinates
var canvas = context.canvas;              
var bb = canvas.getBoundingClientRect();  
var x = (event.clientX-bb.left)*(canvas.width/bb.width);
var y = (event.clientY-bb.top)*(canvas.height/bb.height);
// Get the pixel (or pixels if multiple device pixels map 1 CSS pixel)
var pixels = c.getImageData(x,y,1,1);
// If any pixels have a nonzero alpha, return true (hit)
for(var i = 3; i < pixels.data.length; i+=4) {
if (pixels.data[i] !== 0) return true;
}
// Otherwise it was a miss.
return false;
}
21.4.16  Canvas Example: Sparklines
We’ll end this chapter with a practical example for drawing sparklines. A sparkline is
a small data-display graphic intended to be included within the flow of text, like this
one: 
. The term “sparkline” was coined by author Edward Tufte,
who describes them as “small, high-resolution graphics embedded in a context of
words, numbers, images. Sparklines are data-intense, design-simple, word-sized graph-
ics.” (Learn more about sparklines in Tufte’s book Beautiful Evidence [Graphics Press].)
Example 21-13 is a relatively simple module of unobtrusive JavaScript code for enabling
sparklines in your web pages. The comments explain how it works. Note that it uses
the 
onLoad()
function of Example 13-5.
Example 21-13. Sparklines with the <canvas> element
/*
* Find all elements of CSS class "sparkline", parse their content as
* a series of numbers, and replace it with a graphical representation.
*
21.4  Graphics in a <canvas> | 663
Client-Side
JavaScript
Pdf link to attached file - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding hyperlinks to pdf; change link in pdf
Pdf link to attached file - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
adding links to pdf in preview; clickable pdf links
* Define sparklines with markup like this:
*   <span class="sparkline">3 5 7 6 6 9 11 15</span>
*
* Style sparklines with CSS like this:
*   .sparkline { background-color: #ddd; color: red; }
*
* - Sparkline color is from the computed style of the CSS color property.
* - Sparklines are transparent, so the normal background color shows through.
* - Sparkline height is from the data-height attribute if defined or from
*   the computed style for the font-size otherwise.
* - Sparkline width is from the data-width attribute if it is defined
*   or the number of data points times data-dx if that is defined or
*   the number of data points times the height divided by 6
* - The minimum and maximum values of the y axis are taken from the data-ymin
*   and data-ymax attributes if they are defined, and otherwise come from
*   the minimum and maximum values of the data.
*/
onLoad(function() {   // When the document firsts loads
// Find all elements of class "sparkline"
var elts = document.getElementsByClassName("sparkline");
main: for(var e = 0; e < elts.length; e++) { // For each element
var elt = elts[e];
// Get content of the element and convert to an array of numbers.
// If the conversion fails, skip this element.
var content = elt.textContent || elt.innerText;  // Element content
var content = content.replace(/^\s+|\s+$/g, ""); // Strip spaces
var text = content.replace(/#.*$/gm, "");  // Strip comments
text = text.replace(/[\n\r\t\v\f]/g, " "); // Convert \n etc, to space
var data = text.split(/\s+|\s*,\s*/);      // Split on space or comma
for(var i = 0; i < data.length; i++) {     // For each chunk
data[i] = Number(data[i]);             // Convert to a number
if (isNaN(data[i])) continue main;     // and abort on failure
}
// Now compute the color, width, height, and y axis bounds of the 
// sparkline from the data, from data- attributes of the element,
// and from the computed style of the element.
var style = getComputedStyle(elt, null); 
var color = style.color;
var height = parseInt(elt.getAttribute("data-height")) ||
parseInt(style.fontSize) || 20;
var width = parseInt(elt.getAttribute("data-width")) ||
data.length * (parseInt(elt.getAttribute("data-dx")) || height/6);
var ymin = parseInt(elt.getAttribute("data-ymin")) ||
Math.min.apply(Math, data);
var ymax = parseInt(elt.getAttribute("data-ymax")) ||
Math.max.apply(Math, data);
if (ymin >= ymax) ymax = ymin + 1;
// Create the canvas element.
var canvas = document.createElement("canvas"); 
canvas.width = width;     // Set canvas dimensions
canvas.height = height;
canvas.title = content;   // Use the element content as a tooltip
elt.innerHTML = "";       // Erase existing element content
664 | Chapter 21: Scripted Media and Graphics
VB.NET PowerPoint: Read, Edit and Process PPTX File
PowerPoint editing function, please follow attached link directly. one or more slides from PowerPoint file. How to convert PowerPoint to PDF, render PowerPoint
add hyperlink to pdf online; c# read pdf from url
VB.NET Word: .NET Word Reader & Processor Control SDK | Online
into certain VB.NET Word manipulating application, please follow attached link to find SDK owns the APIs for converting Word document file to PDF, png, gif
convert excel to pdf with hyperlinks; add hyperlink to pdf
elt.appendChild(canvas);  // Insert the canvas into the element
// Now plot the points (i,data[i]), transforming to canvas coordinates.
var context = canvas.getContext('2d');
for(var i = 0; i < data.length; i++) {          // For each data point
var x = width*i/data.length;                // Scale i
var y = (ymax-data[i])*height/(ymax-ymin);  // Scale data[i]
context.lineTo(x,y); // First lineTo() does a moveTo() instead
}
context.strokeStyle = color;   // Specify the color of the sparkline
context.stroke();              // and draw it
}
});
21.4  Graphics in a <canvas> | 665
Client-Side
JavaScript
VB.NET TIFF: VB.NET Sample Code to Process & Manage TIFF Page
page processing application, please click attached link in the for editing source TIFF file at page powerful & profession imaging controls, PDF document, image
check links in pdf; chrome pdf from link
VB.NET TIFF: VB Code to Read Linear and 2D Barcodes from TIFF
type from TIFF document image file by following attached link. 2 of 5 barcodes from TIFF image file. Reading Component allows users scan PDF-417 barcode with a
add links to pdf in preview; add page number to pdf hyperlink
VB.NET PowerPoint: Read & Scan Barcode Image from PPT Slide
to represent one in-memory PowerPoint document file and it image from PPT (.pptx) slide, just follow attached link. VB.NET PPT PDF-417 barcode scanning SDK to
convert doc to pdf with hyperlinks; clickable links in pdf
C# Word: How to Read Barcodes from Word with C#.NET Library DLL
& read barcode image from source Word file. for reading specific barcode type by clicking attached link. C# Word PDF-417 Barcode Reading Tutorial, Detecting C#
add hyperlinks to pdf online; add a link to a pdf
CHAPTER 22
HTML5 APIs
The term HTML5 refers to the latest version of the HTML specification, of course, but
it has also come to refer to an entire suite of web application technologies that are being
developed and specified as part of or alongside HTML. A more formal term for these
technologies is the Open Web Platform. In practice, however, “HTML5” is a conven-
ient shorthand, and this chapter uses it in that way. Some of the new HTML5 APIs are
documented elsewhere in this book:
• Chapter 15 covers the 
getElementsByClassName()
and 
querySelectorAll()
methods
and the 
dataset
attribute of document elements.
• Chapter 16 covers the 
classList
property of elements.
• Chapter 18 covers XMLHttpRequest Level 2, cross-origin HTTP requests, and the
EventSource API defined by the Server-Sent Events specification.
• Chapter 20 documents the Web Storage API and the application cache for offline
web apps.
• Chapter 21 covers the 
<audio>
<video>
, and 
<canvas>
elements and SVG graphics.
This chapter covers a number of other HTML5 APIs:
• §22.1 covers the Geolocation API, which allows browsers to (with permission)
determine the user’s physical location.
• §22.2 covers history management APIs that allow web applications to save and
update their state in response to the browser’s Back and Forward buttons without
having to reload themselves from the web server.
• §22.3 describes a simple API for passing messages between documents with dif-
ferent origins. This API safely works around the same-origin security policy
(§13.6.2) that prevents documents from different web servers from interacting di-
rectly with each other.
• §22.4 covers a major new feature of HTML5: the ability to run JavaScript code in
an isolated background thread and to safely communicate with those “worker”
threads.
667
C# Word: How to Generate Barcodes in C# Word with .NET Library
be easily inserted into MS Word file (.docx C# programming code for individual barcode type, please follow attached link. Create Micro PDF-417 in C# Word, Create
add a link to a pdf in acrobat; adding hyperlinks to a pdf
• §22.5 describes special-purpose memory-efficient types for working with arrays of
bytes and numbers.
• §22.6 covers Blobs: opaque chunks of data that serve as the central data exchange
format for a variety of new binary data APIs. This section also covers a number of
Blob-related types and APIs: File and FileReader objects, the BlobBuilder type, and
Blob URLs.
• §22.7 demonstrates the Filesytem API by which web applications can read and
write files within a private sandboxed filesystem. This is one of the APIs that is still
in flux and is not documented in the reference section.
• §22.8 demonstrates the IndexedDB API for storing and retrieving objects in simple
databases. Like the Filesystem API, IndexedDB is unstable and is not documented
in the reference section.
• Finally, §22.9 covers the Web Sockets API that allows web applications to connect
to servers using bidirectional stream-based networking instead of the stateless
request/response networking model supported by XMLHttpRequest.
The features documented in this chapter either do not fit naturally into any of the
previous chapters or are not yet stable and mature enough to integrate into the main
chapters of the book. Some of the APIs seem stable enough to document in the reference
section, while in other cases the API is still in flux and is not covered in Part IV. All but
one of the examples in this chapter (Example 22-9), worked in at least one browser
when this book went to press. Because the specifications being covered here are still
evolving, some of these examples may no longer work when you read this chapter.
22.1  Geolocation
The Geolocation API allows JavaScript programs to ask the browser for the user’s real-
world location. Location-aware applications can display maps, directions, and other
information relevant to the user’s current position. There are, of course, significant
privacy concerns here, and browsers that support the Geolocation API always ask the
user before allowing a JavaScript program to access the user’s physical location.
Browsers that support the Geolocation API define 
navigator.geolocation
. This prop-
erty refers to an object with three methods:
navigator.geolocation.getCurrentPosition()
Request the user’s current position.
navigator.geolocation.watchPosition()
Request the current position, but also continue to monitor position and invoke the
specified callback when the user’s position changes.
navigator.geolocation.clearWatch()
Stop watching the user’s location. The argument to this method should be the
number returned by the corresponding call to 
watchPosition()
.
668 | Chapter 22: HTML5 APIs
In devices that include GPS hardware, very precise location information can be obtained
from the GPS unit. More commonly, however, location information comes via the Web.
If a browser submits your Internet IP address to a web service, it can usually determine
(based on ISP records) what city you are in (and it is common for advertisers to do this
on the server side). A browser can often obtain an even more precise location by asking
the operating system for the list of nearby wireless networks and their signal strengths.
This information, when submitted to a sophisticated web service allows your location
to be computed with surprising accuracy (usually within one city block).
These geolocation technologies involve either an exchange over the network or com-
munication with multiple satellites, so the Geolocation API is asynchronous:
getCurrentPosition()
and 
watchPosition()
return immediately but accept a callback
argument that the browser invokes when it has determined the user’s position (or when
the position has changed). The simplest form of location request looks like this:
navigator.geolocation.getCurrentPosition(function(pos) {
var latitude = pos.coords.latitude;
var longitude = pos.coords.longitude;
alert("Your position: " + latitude + ", " + longitude);
});
In addition to latitude and longitude, every successful geolocation request also returns
an accuracy value (in meters) that specifies how closely the position is known. Exam-
ple 22-1 demonstrates: it calls 
getCurrentPosition()
to determine the current position
and uses the resulting information to display a map (from Google Maps) of the current
location, zoomed approximately to the location accuracy.
Example 22-1. Using geolocation to display a map
// Return a newly created <img> element that will (once geolocation succeeds)
// be set to display a Google map of the current location. Note that the caller
// must insert the returned element into the document in order to make it 
// visible. Throws an error if geolocation is not supported in the browser
function getmap() {
// Check for geolocation support
if (!navigator.geolocation) throw "Geolocation not supported";
// Create a new <img> element, start a geolocation request to make the img
// display a map of where we are, and then return the image.
var image = document.createElement("img");
navigator.geolocation.getCurrentPosition(setMapURL);
return image;
// This function will be invoked after we return the image object, when
// (and if) the geolocation request succeeds.
function setMapURL(pos) {
// Get our position information from the argument object
var latitude = pos.coords.latitude;    // Degrees N of equator
var longitude = pos.coords.longitude;  // Degrees E of Greenwich
var accuracy = pos.coords.accuracy;    // Meters
// Construct a URL for a static Google map image of this location
var url = "http://maps.google.com/maps/api/staticmap" +
22.1  Geolocation | 669
Client-Side
JavaScript
"?center=" + latitude + "," + longitude + 
"&size=640x640&sensor=true";
// Set the map zoom level using a rough heuristic
var zoomlevel=20;     // Start zoomed in almost all the way
if (accuracy > 80)    // Zoom out for less accurate positions
zoomlevel -= Math.round(Math.log(accuracy/50)/Math.LN2);
url += "&zoom=" + zoomlevel;  // Add zoom level to the URL
// Now display the map in the image object. Thanks, Google!
image.src = url;
}
}
The Geolocation API has several features that are not demonstrated by Example 22-1:
• In  addition  to  the  first  callback  argument, 
getCurrentPosition()
and
watchPosition()
accept an optional second callback that is invoked if the geolo-
cation request fails.
• In addition to the success and error callbacks, those two methods also accept an
options object as an optional third argument. The properties of this object specify
whether a high accuracy position is desired, how “stale” the position is allowed to
be, and how long the system is allowed to take to determine the position.
• The object passed to the success callback also includes a timestamp and may (on
some devices) include additional information such as altitude, speed, and heading.
Example 22-2 demonstrates these additional features.
Example 22-2. A demonstration of all geolocation features
// Determine my location asynchronously and display it in the specified element.
function whereami(elt) {
// Pass this object as the 3rd argument to getCurrentPosition()
var options = {
// Set to true to get a higher accuracy reading (from GPS, for example)
// if available. Note, however that this can affect battery life.
enableHighAccuracy: false, // Approximate is okay: this is the default
// Set this property if a cached location is good enough.
// The default is 0, which forces location to be checked anew.
maximumAge: 300000,        // A fix from the last 5 minutes is okay
// How long are you willing to wait to get the location?
// The default is Infinity and getCurrentPosition() never times out
timeout: 15000             // Don't take more than 15 seconds
};
if (navigator.geolocation) // Request position, if supported
navigator.geolocation.getCurrentPosition(success, error, options); 
else 
elt.innerHTMl = "Geolocation not supported in this browser";
// This function will be invoked if geolocation fails
670 | Chapter 22: HTML5 APIs
function error(e) {
// The error object has a numeric code and a text message. Code values:
// 1: the user did not give permission to share his or her location
// 2: the browser was unable to determine the position
// 3: a timeout occurred
elt.innerHTML = "Geolocation error " + e.code + ": " + e.message;
}
// This function will be invoked if geolocation succeeds
function success(pos) {
// These are the fields that we always get. Note that the timestamp
// is in the outer object, not the inner, coords object.
var msg = "At " +
new Date(pos.timestamp).toLocaleString() + " you were within " + 
pos.coords.accuracy + " meters of latitude " +
pos.coords.latitude + " longitude " + 
pos.coords.longitude + ".";
// If our device returns altitude, add that information.
if (pos.coords.altitude) {
msg += " You are " + pos.coords.altitude + " ± " +
pos.coords.altitudeAccuracy + "meters above sea level.";
}
// if our device returns speed and heading, add that, too.
if (pos.coords.speed) {
msg += " You are travelling at " + 
pos.coords.speed + "m/s on heading " +
pos.coords.heading + ".";
}
elt.innerHTML = msg;  // Display all the position information
}
}
22.2  History Management
Web browsers keep track of what documents have been loaded into a window and
display Back and Forward buttons that allow the user to navigate among those docu-
ments. This browser history model dates back to the days in which documents were
passive and all computation was performed on the server. Today, web applications
often generate or load content dynamically and display new application states without
performing new document loads. Applications like these must perform their own his-
tory management if they want to user to be able to use the Back and Forward buttons
to navigate from one application state to another in an intuitive way. HTML5 defines
two mechanisms for history management.
The simpler history management technique involves 
location.hash
and the hash-
change event. This technique is also somewhat more widely implemented at the time
of this writing: browsers were beginning to implement it even before HTML5 stand-
ardized it. In most browsers (but not older versions of IE), setting the 
location.hash
22.2  History Management | 671
Client-Side
JavaScript
property updates the URL displayed in the location bar and adds an entry to the brows-
er’s history. The 
hash
property sets the fragment identifier of the URL and is tradition-
ally used to specify the ID of a document section to scroll to. But 
location.hash
does
not have to be an element ID: you can set it to any string. If you can encode your
application state as a string, you can use that string as a fragment identifier.
By setting the 
location.hash
property, then, you allow the user to use the Back and
Forward buttons to navigate between document states. For this to work, your appli-
cation must have some way to detect these changes of state, so that it can read the state
stored in the fragment identifier and update itself accordingly. In HTML5, the browser
fires a hashchange event at the Window whenever the fragment identifier changes. In
browsers that support the hashchange event, you can set 
window.onhashchange
to a
handler function that will be called whenever the fragment identifier changes as a result
of history navigation. When this handler function is called, your function would parse
the 
location.hash
value and redisplay the application using the state information it
contains.
HTML5 also defines a somewhat more complex and robust method of history man-
agement involving the 
history.pushState()
method and the popstate event. When a
web app enters a new state, it calls 
history.pushState()
to add that state to the browsing
history. The first argument is an object that contains all the state information necessary
to restore the current state of the document. Any object that can be converted to a string
with 
JSON.stringify()
will work, and certain other native types such as Date and
RegExp should also work as well (see the sidebar below). The second argument is an
optional title (a plain text string) that the browser can use (in a 
<Back>
menu, for ex-
ample) to identify the saved state in the browsing history. The third argument is an
optional URL that will be displayed as the location of the current state. Relative URLs
are resolved against the current location of the document, and it is common to simply
specify a hash (or “fragment identifier”) portion of the URL, such as 
#state
. Associating
a URL with each state allows the user to bookmark internal states of your application,
and if you include sufficient information in the URL, your application can restore its
state when loaded from a bookmark.
Structured Clones
As noted above, the 
pushState()
method accepts a state object and makes a private
copy of it. This is a deep copy or deep clone of the object: it recursively copies the
contents of any nested objects or arrays. The HTML5 standard calls this kind of copy
a structured clone. The process of creating a structured clone is something like passing
the object to 
JSON.stringify()
and then passing the resulting string to 
JSON.parse()
(see §6.9). But JSON only supports JavaScript primitives plus objects and arrays. The
HTML5 standard says that the structured clone algorithm must also be able to clone
Date and RegExp objects, ImageData objects (from the 
<canvas>
element: see
§21.4.14), and FileList, File, and Blob objects (described in §22.6). JavaScript functions
and errors are explicitly excluded from the structured clone algorithm, as are most host
objects such as windows, documents, elements, and so on.
672 | Chapter 22: HTML5 APIs
Documents you may be interested
Documents you may be interested