The <canvas> element is used to draw graphics, on the fly, on a web page.

Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

Note: By default, the <canvas> element has no border and no content.

The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

Tip: You can have multiple <canvas> elements on one HTML page.

To add a border, use the style attribute:

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

Example explained:

First, find the <canvas> element:

Then, call its getContext() method (you must pass the string “2d” to the getContext() method):

The getContext(“2d”) object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

The next two lines draw a red rectangle:

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).

The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

Canvas Coordinates

The canvas is a two-dimensional grid.

The upper-left corner of the canvas has coordinate (0,0)

So, the fillRect() method above had the parameters (0,0,150,75).

This means: Start at the upper-left corner (0,0) and draw a 150×75 pixels rectangle.

Coordinates Example

Mouse over the rectangle below to see its x and y coordinates:

Canvas – Paths

To draw straight lines on a canvas, we will use the following two methods:

• moveTo(x,y) defines the starting point of the line
• lineTo(x,y) defines the ending point of the line

To actually draw the line, we must use one of the “ink” methods, like stroke().

To draw a circle on a canvas, we will use the following method:

• arc(x,y,r,start,stop)

To actually draw the circle, we must use one of the “ink” methods, like stroke() or fill().

Canvas – Text

To draw text on a canvas, the most important property and methods are:

• font – defines the font properties for text
• fillText(text,x,y) – Draws “filled” text on the canvas
• strokeText(text,x,y) – Draws text on the canvas (no fill)

Using fillText():

Using strokeText():

Canvas – Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

There are two different types of gradients:

• createLinearGradient(x,y,x1,y1) – Creates a linear gradient
• createRadialGradient(x,y,r,x1,y1,r1) – Creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.

The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.

To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.

Using createLinearGradient():

Using createRadialGradient():

Canvas – Images

To draw an image on a canvas, we will use the following method:

• drawImage(image,x,y)

HTML Canvas Reference

For a complete reference of all the properties and methods that can be used with the Canvas object (with try-it examples on every property and method), go to our Canvas Reference.

The HTML <canvas> Tag

Is your computer infected with virus? Do you often get mysterious error messages? Well, this is a common problem faced by almost all the computer users across the globe.

Even though some of them are harmless, they do have the ability to do a number of nasty things up to and including damaging or erasing sensitive data from your computer. However, there are ways to keep viruses and other malware away from your computer. Here are the 12 tips to maintain a virus free computer:

1. Email is one of the common ways by which your computer can catch a virus. So, it is always recommended to stay away from SPAM. Open only those emails that has it’s origin from a trusted source such as those which comes from your contact list.

   If you are using your own private email host (other than Gmail, Yahoo, Hotmail etc.) then it is highly recommended that you use a good spam filter. And finally NEVER click on any links in the emails that comes from untrusted sources.

2. USB thumb/pen drives is another common way by which viruses spread rapidly. So, it is always a good habit to perform a virus scan before copying any data onto your computer. NEVER double-click the pen drive to open it. Instead right-click on it and select the option “open”. This is the safe way to open a pen drive.
3. Be careful about using MS Outlook. Outlook is more susceptible to worms than other e-mail programs, unless you have an efficient antivirus programs running. Use Pegasus or Thunderbird (by Mozilla), or a web-based program such as Hotmail or Yahoo (In Firefox).
4. As we all know, Internet is the main source of all malicious programs including viruses, worms, trojans etc. In fact, Internet contributes to virus infection by up to 80 percent. So, here are the tips for safe surfing habits so that you can ward off virus infection up to the maximum possible extent.
   • Do not click on pop-up windows that announce a sudden disaster in your city or announce that you’ve won an hourly prize. They are the ways to mislead Internet users and you should never trust them.
   • You can also use a pop-up blocker to automatically block those pop-ups.
5. Most of us use search engines like Google to find what we are looking for. It is quite obvious for a malicious website to get listed in the search results. So, in order to avoid visiting those untrusted malicious websites, you can download and install the AVG LinkScanner which is a freeware. This tool can become very handy and will help you to stay away from those malicious websites.
6. Install a good antivirus software and keep it updated. Also perform full system scan periodically. It is highly recommended that you turn on the automatic update feature. This is the most essential task to protect your PC from viruses. If PC security is your first option then it is recommended that you go for a shareware antivirus software rather than using the freeware stuffs.

   Most of the antivirus programs offer the auto-protect feature that provides real-time security for your PC. Make sure that this feature is turned on.

7. In addition to an antivirus, it is worthwhile to spend a few bucks on a good anti-spyware program. This can provide extra security for your computer.
8. Never open any email attachments that come from untrusted sources. If it is a picture, text or sound file (these attachments end in the extensions .txt, .jpeg, .gif, .bmp, .tif, .mp3, .htm, .html, and .avi), you are probably safe, but still perform a virus scan before opening them.
9. Do not use disks that other people gave you, even from work. The disk could be infected with a virus. Of course, you can run a virus scan on it first to check it out.
10. Set up your Windows update to automatically download patches and upgrades. This will allow your computer to automatically download any updates to both the operating system and Internet Explorer. These updates fix security holes in both pieces of software.
11. While you download files from untrusted websites/sources such as torrents, warez etc. make sure that you run a virus scan before executing them.
12. And finally it is recommended not to visit those websites that feature illegal/unwanted stuffs such as cracks, serials, warez etc. as they contribute much in spreading of virus and other malicious programs.

Geolocation is a way for the user to retrieve their position and share where they are. This can be done in a few ways, by using a GPS as the one in your new smartphone or connected to your computer is the most precise method. But for users without GPS the browser will use your IP and or try to find nearby WLAN stations, however this is not as precise but gives some idea of where they are. Exactly how this is done is not a W3C standard and each browser have their own way to do it.

Even though geolocation is really complicated it’s quite easy for you to implement. In this tutorial I will show you how to retrieve the user’s position and display it on a map using Google Maps. So lets get started.

[wp_cart:Find Out Your Visitor’s Position Using HTML5 Geolocation:price:6:end]

Step 1. Create the HTML layout

We start of by creating a simple HTML page containing three div tags. One for the current status, one to display the data retrieved and one for displaying the user’s position on a map.

We also include the Google Maps API, it’s important to set sensors=false in the URL, otherwise Google will try to find out the user’s position for us.

The initialize function we’re calling on load will try to fetch the position for us.

Step 2. Retrieve the Position

Next it’s time to create our initialize function which will call the geolocation API to get the position data.

First we check if the browser actually supports geolocation. Browser who supports geolocation are Internet Explorer 9, Firefox 3.5+, Chrome 5+, Opera 10.6+ and Safari 5+. So it’s quite widely supported already, but if the user has an old browser we show them a message telling them that geolocation is not supported.

Next we set the status message to “Checking…” to tell the user that we’re trying to fetch the location data since this might take some time. Then we call navigator.geolocation.getCurrentPosition which will try to retrieve the user’s position, it calls the onSuccess function if it succeeds, otherwise it will call the onError. These functions will be created in the next two steps.

There’s also a few optional parameters to the getCurrentPosition function. These are enableHighAccuracy which tells the web browser to try using the clients GPS if possible, the default value for this is false. The timeout parameter tells the browser how long we’re ready to wait to get the position in milliseconds, the default value is infinite. Lastly we have the maximumAge parameter which tells the browser how old the position cache is allowed to be in milliseconds, the default value for maximumAge is 0 which turns off cache completely.

Since geolocation is a big privacy concern the W3C standards requires the user to agree to share their position before the location is sent to the website, so when we call the getCurrentPosition a information bar will be shown to the user where the user has to allow us to get the position, if the user denies the onError will be function will be called.

Step 3. On Success

Next we add an onSuccess function to our script section. This function will display the data received and call the loadMap function to load our map.

This function is quite self explanatory, we build a string with the retrieved data found in the position variable and shows it to our user. You will always get the latitude, longitude and accuracy values but the rest is optional and will probably only be set if the user has a GPS which the data is retrieved from.

Lastly we call the loadMap function and give the latitude and longitude to show where the user is on a map.

Step 4. On Error

Since geolocation is quite complex a lot can go wrong and we need an error handler. There’s four different error codes, 0 is an unknown error, 1 occurs if you deny the browser from retrieving your location, 2 occurs if the browse somehow fails to retrieve the location and 3 if our timeout variable is too short and the timeout expired.

This function is also quite easy to understand, we get the error as a parameter to our function and shows the user a message depending on the error code retrieved.

Step 5. Display the Map

Next we display a map in our map_canvas div. This has really nothing to do with the HTML5 geolocation. So I won’t explain this for you, but it shouldn’t be too hard to understand.

That’s all for today. You can try out or download the finished code below.