Graphics with Canvas element in HTML5

The canvas element is used to draw graphics on a web page. The HTML5 canvas element uses JavaScript to draw graphics on a web page; hence the programmer should possess some knowledge of JAVA script as well. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. To add a canvas element to the HTML5 page, specify the id, width, and height of the element:

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript. For example, consider the code:

In the above code, JavaScript uses the id to find the canvas element. This is done in the following line from the above code:

After finding the ID, context object is created. This is done in the following line:

The getContext(“2d”) object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

Next, we consider a simple example of drawing a gradient background with the colors of your choice. This is an important feature in the canvas elements yet is quite easy to undertake. Consider the example:

The code first checks whether the browser supports the canvas element or not. If it does, the code proceeds further and get the ID of the canvas element and create the context element of the gradient. Colors and style is then specified as needed.  Canvas creation is an important and innovative concept of HTML5 and has considerably increased the power of web programming.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.