Facelets is an open-source Web template system for JavaServer Faces (JSF). The language requires valid input XML documents to work. Facelets supports all of the JSF UI components and focuses completely on building the JSF component tree, reflecting the view for a JSF application.Facelets is a XML based view technology. It cannot be used with HTML4 doctype. You can use with JSF/Facelets, even without a declaration in top of the page.           Title               Header       Nav       Main       Footer    

The elements of type date allows user to enter date, using a text box or using date picker. With the ng-model directive, bins the values of AngularJS application data to HTML input controls. Firefox does not currently support type="date". It will convert all the values to string. Sinceyou want date to be a real Date object and not a string, so we create another variable, and then link the two variables as done in the below given code function MainCtrl($scope, dateFilter) {    $scope.date = new Date();    $scope.$watch('date', function (date){       $scope.dateString = dateFilter(date, 'yyyy-MM-dd');   ... Read More

The tag specifies video. Currently, there are 3 supported video formats for the element that are MP4, WebM, and Ogg. Autoplay is used to start the video when the video and page loads.The loop attribute is a boolean attribute. When present, it specifies that the video will start over again, every time it is finished.The loop attribute should do it. Your browser does not support the video element. If you have a problem with the loop attribute, listen to the videoEnd event. After that call the play() method when it fires.

Video files on the web sometimes need to be encoded in a special way in order for them to be played while downloading. In order for flash-based videos to work, data should be moved from the end to the start of the stream. A program called mp4 FastStart can do this for you.Programs like HandBrake have a "web" option that also does this when encoding. You need to ensure that your web server is not applying to gzip or deflate compression on top of the compression in the mp4 file.Compression allows your webserver to provide smaller file sizes, which load ... Read More

The tag is used to add video, with the following video formats − MP4, WebM and OggOn selecting a file via the input element.The change event is firedThe event is fired for , , and elements when a change to the element's value is performed by the user.Getting File objectThe File interface provides information about files and allows JavaScript in a web page to access the content. Object of this type is returned by the files property of the HTML element, which eventually lets you access the list of files selected with the element.Object URL pointing ... Read More

For antialiasing, you need to set resampling quality.ctx.imageSmoothingQuality = "low|medium|high"Use an off-screen canvas to reduce the image to half −var c = document.createElement('canvas'), ocx = c.getContext('2d'); c.width = img.width * 0.5; c.height = img.height * 0.5; ocxx.drawImage(img, 0, 0, c.width, c.height);// drawing images reducing to half again and repeating itocx.drawImage(c, 0, 0, c.width * 0.5, cc.height * 0.5);

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

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");

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);             });          }          

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);