Javascript Articles - Page 542 of 671

If the canvas looks distorted, then try to change the height and width −The default height and width of the canvas in HTML5 is of 2/1 ratio −width = 300 height = 150ExampleLet us see an example −                    #mycanvas{border:1px solid red;}                         Output

Use the translate() method to translate canvas. HTML5 canvas provides a translate(x, y) method which is used to move the canvas and its origin to a different point in the grid.Here argument x is the amount the canvas is moved to the left or right, and y is the amount it's moved up or downExample                    #test {             width:100px;             height:100px;             margin:0px auto;          }         ... Read More

Retrieve the mouse coordinates in the click event. Now, retrieve the element by hiding your overlay, and use the following. After that, redisplay the overlay −document.elementFromPoint(x, y)You can also use the following CSS −div {    pointer-events:none; }

The min attribute of the input type number isn’t supported by Firefox, but it works correctly in Google Chrome.ExampleLet us see an example −           HTML input number                        Mention any number between 1 to 10                              

Internet Explorer 11 does not support the element. Add support using Modernizr of the following JS −document.createElement('main');Adding the above element, will not give you the element for the browser, therefore, you need to use the following CSS finally −main {    display:block; }

Translate the image dimensions to 32, 120 −context.translate(32, 120);Now rotate the canvas −context.rotate(90 * Math.PI/180);Now draw the image −context.drawImage(img, -32, -120, 64, 120);

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 {             position: relative;             left: 50%;             -webkit-transform: translateX(-20%);             -ms-transform: translateX(-20%);             transform: translateX(-20%);          }             SVG                     HTML5 SVG Circle                           To center it, add the CSS like the following −# svgelem {    margin-left:auto;    margin-right:auto;    display:block; }

To draw sine waves with SVG, use the following that closely approximates half of a sine wave. I have used a cubic-bezier approximation. Use the element.Example           SVG                     HTML5 SVG Sine Waves                           Output

Use any CDN to deliver your purpose. You can use CloudFlare as a reverse proxy between your users and the CDN to fulfill your purpose.You can also create a rule that redirects whatever you want to index.html. This is how you can what you want considering that CDNs are configured to serve only static existing files as you know.Content Delivery Network (CDN) puts stuff like blobs and other static content in a cache. The process involves placing the data at strategically chosen locations and caching it. As a result, it provides maximum bandwidth for its delivery to users. Let us ... Read More

To solve this problem, follow the below-given steps −For android versions less than 4.4, loading data into a webview with a file scheme as a directory like this won’t work.browser.loadDataWithBaseUrl("file:///android_asset/", html, "text/html", "UTF-8", null);Add a filename and it works on older Android versions −browser.loadDataWithBaseUrl("file:///android_asset/new.html", htmlContent, "text/html", "UTF-8", null);You can use the following too, in case your URL is http://www.demo.com −browser.loadDataWithBaseURL("http://www.demo.com", htmlContent, "text/html", "utf-8", null);