HTML5 drawImage Method to Draw Image onto the Canvas

Rishi Rathor
Updated on 28-Jan-2020 10:23:53

351 Views

To draw image onto the canvas, use the HTML5 drawImage() method:                    function drawShape(){             // get the canvas element using the DOM             var canvas = document.getElementById('mycanvas');                       // Make sure we don't execute when canvas isn't supported             if (canvas.getContext){                // use getContext to use the canvas for drawing                var ctx = canvas.getContext('2d');                // Draw shapes                var img = new Image();                img.src = '/images/backdrop.jpg';                img.onload = function(){                   ctx.drawImage(img,0,0);                   ctx.beginPath();                   ctx.moveTo(30,96);                   ctx.lineTo(70,66);                   ctx.lineTo(103,76);                   ctx.lineTo(170,15);                   ctx.stroke();                }             } else {                alert('You need Safari or Firefox 1.5+ to see this demo.');             }          }                        

HTML5 Meta Name Viewport Issues

Anvi Jain
Updated on 28-Jan-2020 10:23:26

785 Views

To solve the issue for HTML5 meta viewport, you can any of the following fix:You can also try this:Let us say you have a site width of 100px, then it won’t display the whole page, withinitial-scale = 1

HTML5 Validity of Nested Tables

Nishtha Thakur
Updated on 28-Jan-2020 10:22:50

180 Views

The validator considers the following table as valid:                 Example                                                                                                                                                My                            Table                                                                                                                

Access Your Computer Files from Anywhere

Samual Sam
Updated on 28-Jan-2020 10:22:05

9K+ Views

Do you wish to access your personal documents remotely, or music / videos, photos stored on your personnel computer, or on your mobile phone while you are travelling or when you are in office? The simplest solution is to copy all your data from the source to a portable hard drive and then carry it around. However, this is a cumbersome approach as you would require syncing manually the home computer with your portable disk.There are many other innovative ways these days. In this article, let us explore to see some technologies, tools to make this job easier whenever & ... Read More

Cross-Origin HTML Video Not Loading in Google Chrome

Samual Sam
Updated on 28-Jan-2020 10:21:47

202 Views

To solve the loading issues in the element, you need to set cross-origin to “anonymous”:You can also try another fix also.This can be due to missing of Access-Control-Allow-Headers response header with the list of HTTP headers that match the list passed in Access-Control-Request-Headers request header.

HTML5 Audio Control Stop Button

Lakshmi Srinivas
Updated on 28-Jan-2020 10:20:06

1K+ Views

Try the following code to add a stop button to your audio in HTML5:function displayStopBtn() {    var myPlayer = document.getElementsByTagName('audio')[0];    myPlayer.pause();    myPlayer.currentTime = 0; }You can also include jQuery:$("#stopButton").click(function () {    audio.pause();    audio.currentTime = 0; });

Getting Safari to Recognize Main HTML5

karthikeya Boyini
Updated on 28-Jan-2020 10:19:15

143 Views

To make a element to be recognized by Safari:main {    display: block;    width: 800px;    height: 800px;    background-color: #0C0; }You need to focus on:main {    display: block; }

Full Page Drag and Drop Files Website with HTML

Lakshmi Srinivas
Updated on 28-Jan-2020 10:18:14

432 Views

For full page drag and drop files, try the following code:var myDrop = document.getElementById('dropZone'); function displayDropZone() {    myDrop.style.visibility = "visible"; } function hideDropZone() {    myDrop.style.visibility = "hidden"; } function allowDrag(ev) {    if (true) {       ev.dataTransfer.dropEffect = 'copy';       ev.preventDefault();    } } function handleDrop(ev) {    ev.preventDefault();    hideDropZone();    alert('This is Drop!'); } window.addEventListener('dragenter', function(ev) {    displayDropZone(); }); myDrop.addEventListener('dragenter', allowDrag); myDrop.addEventListener('dragover', allowDrag); myDrop.addEventListener('dragleave', function(e) {    hideDropZone(); }); myDrop.addEventListener('drop', handleDrop);

What Happens When MySQL Encounters an Out of Range Date

varun
Updated on 28-Jan-2020 10:13:49

477 Views

The response of MySQL on encountering out-of-range or invalid date will depend upon SQL MODE. If we have enabled ALLOW_INVALID_DATES mode then MySQL will convert the out of range values into all zeros (i.e. ‘0000:00:00 00:00:00’) and also stores the same in the table without producing any error or warning.For example, we can change SQL MODE as follows and then insert the out-of-range −mysql> set sql_mode = 'ALLOW_INVALID_DATES'; Query OK, 0 rows affected (0.00 sec) mysql> Insert into order1234(productname, quantity, orderdate) values('A', 500, '999-05-100'); Query OK, 1 row affected, 1 warning (0.13 sec) mysql> Select * from order1234; ... Read More

Copy a File to Multiple Directories in Linux

Samual Sam
Updated on 28-Jan-2020 10:12:38

650 Views

Did you get to take one file on a Linux or Unix approach and replicate it to a whole bunch of alternative directories? Then, this article is for you to copy a file to multiple directories in Linux/Ubuntu.Using with cp and xargsTo copy a file to multiple directories in Linux/Ubuntu, use the following in command –$ echo dir1 dir2 dir3 | xargs -n 1 cp file1In the above command, we are copying file1 to dir1, dir2, and dir3 directories.The sample example of the above command is as shown below −$ echo Music Videos Desktop | xargs -n 1 cp httpstat.pyIn ... Read More

Advertisements