Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by karthikeya Boyini
Page 95 of 143
Is their a cross-origin attribute in HTML5?
Yes, the official specification states cross-origin attribute as:The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.You can use it to solve JavaScript errors like to log js errors:if (securityOrigin()->canRequest(targetUrl)) { msg = myErroe; line = myLineNumber; source = sourceURL; } else { msg = "Error!"; source = String(); line = 0; }
Read MoreHow to draw large font on HTML5 Canvas?
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);
Read MoreBlending two images with HTML5 canvas
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 MoreLog error to console with Web Workers in HTML5
Here is an example of an error handling function in a Web Worker JavaScript file that logs errors to the console.ExampleWith error handling code, above example would become like the following: Big for loop var worker = new Worker('bigLoop.js'); worker.onmessage = function (event) { alert("Completed " + event.data + "iterations" ); }; worker.onerror = function (event) { console.log(event.message, event); }; function sayHello(){ alert("Hello sir...." ); }
Read MoreResize image before submitting the form HTML5
To resize the image before submitting the form, you need to use the drawImage() method.Scale the original image and draws the scaled version on the canvas at [0,0]context.drawImage( img, 0,0,img.width,img.height, 0,0,myWidth,UseHeight );Above, we saw the following:Here,var myWidth = Math.floor( img.width * Scale ); var myHeight = Math.floor( img.height * Scale );And,var x = Math.floor( ( world.width - myWidth) / 2 ); var y = Math.floor( ( world.height - myHeight) / 2 );
Read MoreXMLHttpRequest for Video Tag?
The HTML5 file Blob.slice() method is useful for creating a Blob object containing the data. This data is in the specified range of bytes of the source Blob. It uses XMLHttpRequest as in the below example.Let us see an example to send and receive binary data using slice(). This example sends a text and uses the POST method to send the "file" to the server:var val = new XMLHttpRequest(); val.open("POST", url, true); val.onload = function (event) { }; var blob = new Blob(['demo'], {type: 'text/plain'}); val.send(blob);For video:req.onload = function () { var blob_uri = URL.createObjectURL(this.response); myElement.appendChild(document.createElement("source")).src = ...
Read MoreHow to keep the image at the back of the HTML5 canvas when moving elements with fabric.js?
To keep the image at the back of the canvas, when move elements, you need to pass:preserveObjectStackingAnd the following would work and the image is not visible in the background:window.canvas = new fabric.Canvas('c', { preserveObjectStacking:true });Now, on moving the shape will appear over the image.
Read MoreHow can I handle Server-Sent Events in HTML5?
To handle Server-Sent Events in HTML5, you can try to run the following code: document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false); function eventHandler(event) { // Alert time sent by the server document.querySelector('#ticker').innerHTML = event.data; } [TIME]
Read Morecanvas.style.display = “block” not working in HTML5
Change the setTimeout() to use a function reference. It works as the function available at the time the reference.The reference will be transferred to the timeout event callback rather than a string reference:window.setTimeout(startNow, 2000);Set it like the following:setTimeout(startNow, 1000); function startNow () { alert(‘Working correctly!'); }
Read MoreRetrofit existing web page with mobile CSS
To retrofit, use the CSS media queries, and allow different stylesheets to different browser capabilities. A benefit is that you do not have to go for any server-side code.This would require you to add specific detection code to the script for grouping of the device.The media queries handle even devices you've never heard of.Set the following:@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { body { color: blue; } }
Read More