Found 2202 Articles for HTML

How to draw an oval in HTML5 canvas?

Arjun Thakur
Updated on 16-Dec-2021 12:13:41

943 Views

You can try to run the following code to draw an oval in HTML5 canvas −Example                                  // canvas          var c = document.getElementById('newCanvas');          var context = c.getContext('2d');          var cX = 0;          var cY = 0;          var radius = 40;                    context.save();          context.translate(c.width / 2, c.height / 2);          context.scale(2, 1);          context.beginPath();          context.arc(cX, cY, radius, 0, 2 * Math.PI, false);          context.restore();          context.fillStyle = '#000000';          context.fill();          context.lineWidth = 2;          context.strokeStyle = 'yellow';          context.stroke();           Output

How to find the size of localStorage in HTML?

Ankith Reddy
Updated on 24-Jun-2020 13:38:28

652 Views

localStorage is used to persist information across multiple sessions. It has a maximum size of 5MB.ExampleYou can try to run the following code snippet to check the size allocated −var sum = 0; // loop for size for(var i in localStorage) {    var amount = (localStorage[i].length * 2) / 1024 / 1024;    sum += amount;    document.write( i + " = " + amount.toFixed(2) + " MB"); } document.write( "Total = " + sum.toFixed(2) + " MB");

Can you take a screenshot of the page using HTML5 Canvas?

George John
Updated on 24-Jan-2020 10:39:44

635 Views

Html2Canvas is a JavaScript library that can take screenshot of the whole web page or specific part. It doesn’t take the screenshot but creates the view based on the page information.ExampleBelow given is an example code. Here, html2canvas.js script is included at the . The html2canvas() method is called. Returns the base64 value, which eventually creates image source or an image file.                         Take screenshot                                                      function screenshot(){             html2canvas(document.body).then(function(canvas) {                document.body.appendChild(canvas);             });          }          

Does HTML5 Canvas support Double Buffering?

Chandu yadav
Updated on 24-Jan-2020 10:38:56

583 Views

For double buffering on the canvas, create a 2nd canvas element and draw to it. After that draw the image to the first canvas using the drawImage() method,// canvas element var canvas1 = document.getElementById('canvas'); var context1 = canvas1.getContext('2d'); // buffer canvas var canvas2 = document.createElement('canvas'); canvas2.width = 250; canvas2.height =250; var context2 = canvas2.getContext('2d'); // create on the canvas context2.beginPath(); context2.moveTo(10,10); context2.lineTo(10,30); context2.stroke(); //render the buffered canvas context1.drawImage(canvas2, 0, 0);

Changing three.js background to transparent or another color in HTML

Giri Raju
Updated on 23-Nov-2023 14:22:48

1K+ Views

If you want a transparent background in three.js, you need a pass in the alpha parameter to the WebGLRenderer constructors in the below-given code − var renderer = new THREE.WebGLRenderer( {alpha: true } ); // You can leave the clear color at the defaultvalue. renderer.setClearColor( 0x000000, 0 ); //default However, to set the background color, renderer.setClearColor(0xb0f442 );

Convert HTML5 into standalone Android App

mkotla
Updated on 20-Nov-2023 12:13:12

2K+ Views

Steps Follow the below-given steps to convert HTML5 into standalone Android App You need to first create an Android app using Eclipse. Move HTML code to /assets folder −The Assets provide a way to include arbitrary files such as text, XML, music, fonts, and video in your application. Load web view with the file − android_asset/ file  enable javascript Layout for WebView While creating a layout for WebView − WebVieww = new WebView(this); w.loadUrl("http://www.app.com/");

What is the difference between SVG and HTML5 Canvas?

George John
Updated on 01-Jun-2020 11:14:08

10K+ Views

The HTML element is a container for SVG graphics. SVG stands for Scalable Vector Graphics. SVG and useful for defining graphics such as boxes, circles, text, etc. SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG.The HTML element is used to draw graphics, via JavaScript. The element is a container for graphics.SVGHTML CanvasSVG has better scalability. So it can be printed with ... Read More

Drawing an SVG file on an HTML5 canvas

radhakrishna
Updated on 24-Nov-2023 01:25:51

2K+ Views

To draw HTML Image Elements on a canvas element, use the drawImage() method. This method defines an Image variable with src = "mySVG.svg", and use drawImage on load. var myImg = new Image(); myImg.onload = function() {    ctx.drawImage(myImg, 0, 0); } img.src = "http://www.example.com/files/sample.svg ";

How to change the playing speed of videos in HTML5?

Ankith Reddy
Updated on 21-Nov-2023 21:00:26

3K+ Views

Use the playbackRate property sets the current playback speed of the audio/video. With that, the defaultPlaybackRate property sets the default playback speed of the audio/video. Change the playing speed of videos You can try to run the following code to change the playing speed of videos − /* play video thrice as fast */ document.querySelector('video').defaultPlaybackRate = 3.0; document.querySelector('video').play(); Play video twice as fast The following is to play the video twice as fast − /* play video twice as fast */ document.querySelector('video').playbackRate = 2;

Streaming a video file to an HTML5 video player with Node.js so that the video controls continue to work

Prabhas
Updated on 04-Mar-2020 05:25:44

294 Views

Use createReadStream to send the requested part to the client. The function call createReadStream() will give you a readable stream. ExampleThe following is the code −stream = fs.createReadStream(path); stream.on('open', function () {    res.writeHead(206,{       "Content-Range":"bytes " + begin + "-" + end + "/" +total, "Accept-Ranges":"bytes",          "Content-Length":chunksize, "Content-Type":"new/mp4"    });    stream.pipe(res); });

Advertisements