To choose, you need to define a wrapper function −function display ( file ) {    if ( window.webkitURL ) {       return window.webkitURL.createObjectURL( file );    } else if ( window.URL && window.URL.createObjectURL ) {       return window.URL.display( file );    } else {    return null;    } }After that set it for cross-browser −var url = display( file );

To play HTML blocks one by one, use the following HTML first −         The following is what you need to do to play audio one by one −var one = document.getElementById('one'); one.onended = function() {    document.getElementById('two').play(); } one.play();

To draw a circle with transparent background and border-radius, use the following CSS −body {    background: repeating-linear-gradient(45deg, white 0px, green 100px);    height: 400px;    background-size: 400px 400px;    background-repeat: no-repeat; } html {    height: 100%; } #box {    position: absolute;    width: 400px;    height: 400px;    border: solid blue 2px;    animation: colors 5s infinite; } #demo {    width: 50%;    height: 100%;    right: 0px;    position: absolute;    overflow: hidden;    transform-origin: left center;    animation: cliprotate 18s steps(2) infinite;    -webkit-animation: cliprotate 18s steps(2) infinite; } .circlehalf {    box-sizing: border-box; ... Read More

Use the following method to create a pattern with HTML5 Canvas: createPattern(image, repetition)− This method will use an image to create the pattern. The second argument could be a string with one of the following values: repeat, repeat-x, repeat-y, and no-repeat. If the empty string or null is specified, repeat will be assumed.ExampleYou can try to run the following code to learn how to create a pattern −                    #test {             width:100px;             height:100px;           ... Read More

HTML5 canvas provides two important methods to save and restore the canvas states.Canvas states are stored on a stack every time the save method is called, and the last saved state is returned from the stack every time the restore method is called.Sr.No.Method and Description1save()This method pushes the current state onto the stack..2restore()This method pops the top state on the stack, restoring the context to that state.                                                              ExampleYou can try ... Read More

HTML5 canvas provides rotate(angle) method which is used to rotate the canvas around the current origin.This method only takes one parameter and that's the angle the canvas is rotated by. This is a clockwise rotation measured in radians.ExampleYou can try to run the following code to rotate HTML Canvas −                    #test {             width: 100px;             height:100px;             margin: 0px auto;          }             ... Read More

To play randomly, add the songs like this −init ([    'http://demo.com/songs/song1.mp3,    'http://demo.com/songs/song2.mp3,    'http://demo.com/songs/song3.mp3 ]);Use the following to play randomly using Math.random −function displayRandom() {    var audio = Math.floor(Math.random() * (collection.length));    audio = collection[audio];    audio.play();    setTimeout(loop,audio.duration*1000); }

HTML5 canvas provides the necessary methods to draw an image and erase it completely. We can take JavaScript help to simulate good animation over an HTML5 canvas.ExampleYou can try to run the following code to perform basic HTML5 Canvas Animation −                    var pattern= new Image();          function animate(){             pattern.src = '/html5/images/pattern.jpg';             setInterval(drawShape, 100);          }          function drawShape(){             // get the canvas ... Read More

Add the following in the bottom −NETWORK: *Set the version number of the manifest in the URL with the path.In addition, set −CACHE MANIFEST #rev ?v = 42 /css/style.css?v = 20 /js/myscript.js?v = 20

HTML5 Geolocation API lets you share your location with your favorite web sites. A JavaScript can capture your latitude and longitude, can be sent to backend web server, and do fancy location-aware things like finding local businesses or showing your location on a map.ExampleLet us see how to get the current position −                    function showLocation(position) {             var latitude = position.coords.latitude;             var longitude = position.coords.longitude;             alert("Latitude : " + latitude + " ... Read More