- 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 8894 Articles for Front End Technology
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
224 Views
To get the pixel color from canvas, use the following code. This returns the color in rgba −var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4 // color in rgba var r = data[index] var g = data[index + 1] var b = data[index + 2] var a = data[index + 3]
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
71 Views
The putImageData() method places the image data onto the canvas. To animate canvas, we create a reusable ImageData object outside the main loop,var ct = c.getContext("2d", {alpha: false}); // context without alpha channel. var a = ct.createImageData(c.width, c.height); var buffer = new Uint32Array(a.data.buffer); function loop() { noise(ct); requestAnimationFrame(loop) })() function noise(ct) { var l =buffer.length - 1; while(l--) buffer[l] = Math.random() >0; ct.putImageData(a, 0, 0); }
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13540/profile/60_41073-1512640012.jpg)
2K+ Views
The date picker in HTML5 basically works very similar to how the JavaScript Libraries did, when we focus on the field a calendar will pop out, and then we can navigate through the months and years to select the date.Therefore, if you want the date input to use more spacing and a color scheme you could add the following to your code.::-webkit-datetime-edit { padding: 2 em; } ::-webkit-datetime-edit-fields-wrapper { background:green; } ::-webkit-datetime-edit-text { color: blue; padding: 0 0.3em; } ::-webkit-datetime-edit-month-field { color: red; } ::-webkit-datetime-edit-day-field { color: orange; } ::-webkit-datetime-edit-year-field { color: red; }
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
99 Views
The classList property returns the class name(s) of an element, as a DOMTokenList object. The classList property is read-only, however, you can modify it by using the add() and remove() methods.The classListproperty ensures that duplicate classes are not unnecessarily added to the element. In order to keep this functionality, if you dislike the longhand versions or jQuery version, I’d suggest adding addMany function and removeMany to DOMTokenListThese would then be useable like so −DOMTokenList.prototype.addMany = function(classes) { var arr = classes.split(' '); for (var j = 0, length = arr.length; j < length; j++) { this.add(array[j]); ... Read More
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
1K+ Views
In order to change colour of image drawn on an HTML5 Canvas element, you can try to run the following code. Use the drawImage() method − Example: Code to change color of image function display(img1, red, gr, bl) { //func to change color of image var canvas1 = document.createElement('canvas');//canvas element initialisation canvas1.width = img.width;//canvas width initialisation canvas1.height = img.height; //canvas height initialisation var ctx1 = canvas1.getContext('2d'); ctx1.drawImage(img, 0, 0); var myImg =ctx1.getImageData(0, 0, canvas1.width, canvas1.height); for (var t=0;t< myImg.data.length;t+=4) { myImg.data[t]= red | myImg.data[t]; ... Read More
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
198 Views
There are similar rules for native mobile apps and application. Only domain needs are to be added to white list in PhoneGap or Cardova.The device acts as a server and can access content from URL .If PhoneGap is used then domains are added to whitelist or a wildcard.While dealing with a native application, you expect to make requests from file://, instead of from https://. However, a request is not made across the HTTP protocol, so the same rules do not apply.Making requests from native mobile app, will allow you to make requests to any domain without any major issues. Read More
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
597 Views
When we apply z index to a canvas whose position is fixed, it stop causes chrome to render all other elements which have position:fixed properly. This only happens if canvas is greater than 256X256 px in size.Wrap both h1 and canvas with the fixed div and solves the issue − Test Title The following is the CSS −h1{ position: fixed; } body{ height: 1500px; } canvas{ position: fixed; z-index: -10; }
![Naveen Singh](https://www.tutorialspoint.com/assets/profiles/13528/profile/60_91717-1512651120.jpg)
69 Views
One of the divs, when placed in another style sheet, can make menu invisible in Internet Explorer.If opacity property is used which is not a cross-border solution, it should be like the following to display −opaque { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; // first filter: alpha(opacity=90); // second }