Javascript Articles - Page 450 of 534

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

In Html, we can edit the content by using contenteditable attribute, it specifies whether the elements content is editable or not by the user. The property of contentEditable is set or returns if the content of an element is editable. Syntax The usage/syntax of editable content in HTML is − The above contenteditable attribute has two values true/false. True indicates that the element is editable. False indicates that the element cannot be edited. Example Following is the example, to create editable content in an HTML − This ... Read More

Use the dir attribute in HTML, to add the direction of the text.ExampleYou can try to run the following code to include the direction of text display in HTML −           This is demo text from left-to-right.       This is demo text from right-to-left.    

In the first example, you are just inheriting amitBaseClass prototype.function SomeClass() { } SomeClass.prototype = Object.create(amitBaseClass.prototype);In the second example, you are executing the constructor function. An instance of amitBaseClass is created and you are inheriting the who complete amitBaseClass object.function SomeClass () { } SomeClass.prototype = new amitBaseClass ();So, both are doing separate work.

To perform unit testing in JavaScript, use Unit.js. It is a cross-platform open-source unit testing framework.ExampleLet’s say the following in your test code −var example = ‘Welcome’; test.string(example) .isEqualTo(‘Welcome’);The function demo() displays a suit of tests, whereas demo1() is an individual test specification,demo('Welcome’, function() {    demo1('Welcome to the website', function() {       var example = ‘Welcome’;       test.string(example)       .isEqualTo(‘Welcome’);    }); });

To disable web browsers’ back button, try to run the following code. This is the code for current HTML page,Example           Disable Browser Back Button                               Next Page               $(document).ready(function() {          function disablePrev() { window.history.forward() }          window.onload = disablePrev();          window.onpageshow = function(evt) { if (evt.persisted) disableBack() }       });     The following is the code for newpage.html,           Go to back page using web browser back button.     a