The tag <canvas> HTML5

The new tag is a tag <canvas> HTML5 is not present in previous versions, which can be used to draw and work with graphics.

The tag <canvas> needs a scripting language support, such as JavaScript to function properly and perform fully its potential.

The purpose of this article is to illustrate the basic use of the new tags but some points advanced by the constant use of practical examples, I hope, will facilitate learning.

Premise

As an absolute novelty in the best canvas is not supported by all browsers, so it is possible that the demonstration examples in this article are not displayed correctly.
The test was carried out with Google Chrome, on which you have not experienced any problems.

Use the tag <canvas>

The common use of the Canvas tag is pretty simple and no different from other HTML tags.
Formally Canvas is a simple container and, as such, has an opening tag (<canvas>) and closing (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Element not supported







 </ Canvas>

If the dimensions are not indicated explicitly (using the attributes width and height) the size assigned to the container is the default, a basic rectangle with height 300 and 150.
The id attribute, of course, is not essential but, in my opinion, it is always a good idea to call to have a unique reference for each object that is being used on the page.

The text portion delimited by <canvas> and </ canvas> to represent the note indicates when the graphic is not supported by your browser.

Before starting with the implementation details test the potential of canvas with a simple code to test live:

 <canvas id="bandierina" width="180"> height="100"> Not Supported </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ('flag');







 var c = canvas.getContext ('2 d ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = '# FFFFFF';







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ Script>

On this page you can see the result of this code (to see the output correctly, you must have, once again, a browser that supports HTML 5).

As already announced at the beginning of the article in this section of code is explicit the fact that the canvas work using a script. From this example we can immediately note the standard technique to extract the object canvas background variables:

 / / Create the canvas item by ID







 var canvas = document.getElementById ('flag');









 / / Create a new two-dimensional object on the canvas







 var c = canvas.getContext ('2 d ');

Javascript getElementById method stores the object in a variable canvas, through the value of its id field; getContext ('2 d ') takes the context, or an object that offers the programmer a number of methods to work with the canvas as desired (in our case you want to work with the two-dimensional graphics functions, ie, 2D).

In the following pages we will list some basic operations useful to the programmer intends to make use of the canvas.

• <<
• 1
• 2
• 3
• 4
• 5
• >>