HTML5 canvas provides two important methods to save and restore the canvas states.Canvas states are stored on a stack every time the save method is called, and the last saved state is returned from the stack every time the restore method is called.Sr.No.Method and Description1save()This method pushes the current state ... Read More

To implement animation on font-weight property with CSS, you can try to run the following codeExampleLive Demo                    p {             border: 2px solid black;             width: 400px;             height: 100px;             animation: myanim 5s infinite;          }          @keyframes myanim {             70% {                font-weight: bold;             }          }                     This is demo text    

The following are the flex-item propertiesorderflex-growflex-shrinkflex-basisflexalign-selfLet us see an example of flex-basis propertySet the length of a flex item with the flex-basis CSS property. You can try to run the following code to implement the flex-basis propertyExampleLive Demo                    .mycontainer ... Read More

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.ExampleLet us see an example of SVG −                    #svgelem {   ... Read More

The vertical line in the following is called Grid Columns.

To make your video player responsive, use the width property and set it to 100%ExampleLive Demo                                 video {                width: 100%;                height: auto;             }                                                         To check the effect, you need to resize the browser.    

Use the JavaScript FileReader to allow users to choose an image.Let us see an example −         Here is the JS −function readURL(input) {    if (input.files && input.files[0]) {       var r = new FileReader();       r.onload = function (ev) {          $('#myid).attr('src', ev.target.result);       }       reader.readAsDataURL(input.files[0]);    } }   

Use the flex property to add flex-grow, flex-shrink and flex-basis properties in a single line.You can try to run the following code to implement the flex propertyExampleLive Demo                    .mycontainer {             display: flex;     ... Read More

The easiest way to reload the current page without losing form data, use WebStorage where you have -persistent storage (localStorage) or session-based (sessionStorage) which remains in memory until your web browser is closed.Try this when the page is about to reload, window.onbeforeunload = function() {    localStorage.setItem(name, $('#inputName').val());    localStorage.setItem(phone, ... Read More

To get the video duration, query the readyState attribute. It has a series from 0 to 4. When the metadata has loaded, the value you will get is 1.Therefore, you need to do something like −window.setInterval(function(tm) {    // Using readyState attriute    if (video.readyState > 0) {     ... Read More