Found 598 Articles for Front End Scripts

DOMException Failed to load because no supported source was found

karthikeya Boyini
Updated on 25-Jun-2020 07:26:12

3K+ Views

It can be a Cross-Origin Resource Sharing (CORS) issue.video.crossOrigin = 'anonymous';To enable cross-origin resource sharing, use the following. It allows the images to pass the HTTP header with an image response.Access-Control-Allow-Origin: *You can also use the HTML() method −$('#audio').html('');

What is composition in HTML5 Canvas?

Arjun Thakur
Updated on 28-Jan-2020 06:04:08

302 Views

HTML5 canvas provides compositing attribute globalCompositeOperation that affect all the drawing operations.ExampleWe can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.                    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

Increase or decrease units in HTML5 Canvas grid

Jennifer Nicholas
Updated on 25-Jun-2020 07:25:36

327 Views

HTML5 canvas provides scale(x, y) method that is used to increase or decrease the units in our canvas grid. This can be used to draw scaled down or enlarged shapes and bitmaps.This method takes two parameters where x is the scale factor in the horizontal direction and y is the scale factor in the vertical direction. Both parameters must be positive numbers.ExampleLet us see an example −                    function drawShape(){             // get the canvas element using the DOM             ... Read More

What is a transformation matrix in HTML5 canvas?

Samual Sam
Updated on 25-Jun-2020 07:26:44

236 Views

HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.ExampleLet us see an example of canvas transformation −                    function drawShape(){             // get the canvas element using the DOM             var canvas = document.getElementById('mycanvas');             // make sure we don't execute when canvas isn't supported             if (canvas.getContext){                // use getContext to use the canvas for drawing                var ctx = canvas.getContext('2d');                var sin = Math.sin(Math.PI/6);                var cos = Math.cos(Math.PI/6);                ctx.translate(200, 200);                var c = 0;                for (var i=0; i

How to fire after pressing ENTER in text input with HTML?

Vrundesha Joshi
Updated on 25-Jun-2020 07:28:39

448 Views

Use HTML with jQuery to achieve this and fire after pressing ENTER −Example                          $(document).ready(function(){             $('input').bind("enterKey",function(e){                alert("Enter key pressed");             });             $('input').keyup(function(e){                if(e.keyCode == 13)                {                   $(this).trigger("enterKey");                }             });          });                             Press Enter key in the above input text.    

Playing MP4 video in WebView using HTML5 in Android

Ankith Reddy
Updated on 25-Jun-2020 07:12:13

954 Views

To play MP4 video in WebView, you need to first declare Content Provider in Manifest −Implement open file with open() method −URI myURL = URI.create("file:///mypath/new.mp4"); File f = new File(myURL); ParcelFileDescriptor p =    ParcelFileDescriptor.open(f, ParcelFileDescriptor.MODE_READ_ONLY); return p;

Touchmove pointer-events: none CSS does not work on Chrome for Android 4.4 / ChromeView

Lakshmi Srinivas
Updated on 25-Jun-2020 07:29:12

258 Views

The touchstart event is fired when the touchpoint is positioned on the touch surface. Use addEventListener() for touchmove pointer-events −overlay.addEventListener('touchstart', function(ev){    ev.preventDefault(); });Here, we have also used the preventDefault() method. The preventDefault() method prevents the browser from executing the default action.

How can I make a div with irregular shapes with CSS3 and HTM5?

karthikeya Boyini
Updated on 25-Jun-2020 07:17:00

554 Views

With CSS3, you can always create shapes like rectangle, triangle, etc.Let us see how −The following is a rectangle −#shape1 {    width: 300px;    height: 150px;    background: blue; }The following is a triangle −#shape2 {    width: 0;    height: 0;    border-left: 200px solid transparent;    border-bottom: 200px solid blue; }

Playing a WAV file on iOS Safari

Nancy Den
Updated on 25-Jun-2020 07:13:31

492 Views

To play a WAV file on iOS Safari, add a content-range header.The headers would allow a WAV file to play −Content-Range: bytes XX-XX/XX Content-Type: audio/wav Content-Disposition: attachment; filename = "new.WAV" Content-Length: XXAbove, new.WAV is our WAV file.

Measure text height on an HTML5 canvas element

George John
Updated on 25-Jun-2020 07:12:51

2K+ Views

To get the text height, set the font in pt −context.font="15pt Calibri";Now, get the height like the following −var height = parseInt(context.font.match(/\d+/), 10);Above we have used a match to separate the font size from font face.

Advertisements