- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 601 Articles for Front End Scripts
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
180 Views
To draw large font properly in HTML5 Canvas, you can try to run the following code:var myCanvas = document.getElementById("myCanvas"); var context = c.getContext("2d"); context.font = '180pt Georgia'; context.strokeStyle = "#FF0000"; context.fillStyle = "#FFFFFF "; context.lineWidth = 34; context.fillText("Demo!",0,200); context.strokeText("Demo!",0,200);
![V Jyothi](https://www.tutorialspoint.com/assets/profiles/13530/profile/60_77592-1512648869.jpg)
522 Views
The srcdoc attribute specifies the HTML content of the page to show in the iframe. The HTML tag is used to create an inline frame.Alternative of the srcdoc attribute will be:var doc = document.querySelector('#demo').contentWindow.document; var content = ''; doc.open('text/html', 'replace'); doc.write(content); doc.close();
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
759 Views
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); }
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
135 Views
HTML5 canvas provides compositing attribute globalCompositeOperation that affect all the drawing operations. var compositeTypes = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out', 'destination-atop','lighter','darker','copy','xor' ]; function drawShape(){ for (i = 0; i < compositeTypes.length; i++){ var label = document.createTextNode(compositeTypes[i]); document.getElementById('lab'+i).appendChild(label); var ctx = document.getElementById('tut'+i).getContext('2d'); // draw rectangle ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70); // set composite property ctx.globalCompositeOperation = compositeTypes[i]; // draw circle ctx.fillStyle = "#0066FF"; ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill(); } }
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
2K+ Views
To blend, you need to perform blending of two images in proportion 50-50.Let us see how: Blended image window.onload = function () { var myImg1 = document.getElementById('myImg1'); var myImg2 = document.getElementById('myImg2'); var myCanvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // width and height var w = img1.width; var h = img1.height; myCanvas.width = w; myCanvas.height = h; var pixels = 4 ... Read More
![Vrundesha Joshi](https://www.tutorialspoint.com/assets/profiles/13566/profile/60_88163-1512715024.jpg)
101 Views
Web RTC required peer-to-peer communication between browsers. This mechanism required signalling, network information, session control and media information. Web developers can choose different mechanism to communicate between the browsers such as SIP or XMPP or any two way communications. An example of createSignalingChannel():var signalingChannel = createSignalingChannel(); var pc; var configuration = ...; // run start(true) to initiate a call function start(isCaller) { pc = new RTCPeerConnection(configuration); // send any ice candidates to the other peer pc.onicecandidate = function (evt) { signalingChannel.send(JSON.stringify({ "candidate": evt.candidate })); }; // once remote stream ... Read More
![Sravani S](https://www.tutorialspoint.com/assets/profiles/13538/profile/60_67753-1512711355.jpg)
175 Views
The following function is an example of IndexedDB to add data:function add() { var request = db.transaction(["employee"], "readwrite") .objectStore("employee") .add({ id: "001", name: "Amit", age: 28, email: "demo1@example.com" }); request.onsuccess = function(event) { alert("Amit has been added to your database."); }; request.onerror = function(event) { alert("Unable to add data\rAmit is already exist in your database! "); } }Above, we added the following details in the database:const employeeData = [ { id: "001", name: "Amit", age: 28, email: "demo1@example.com" }, ];
![Rishi Rathor](https://www.tutorialspoint.com/assets/profiles/13563/profile/60_89283-1512714754.jpg)
111 Views
HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.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.