Canvas and SVG graphic Elements Of HTML 5: Basic HTML

0

Canvas and SVG elements
Graphics is an art of drawing which combines the images, pictures and colors. Graphics attracts every people. Most of the sites have used graphics in web by using images. But when HTML 5 was induced, there was no need to use the picture, some graphics can be done using HTML 5. Graphics in web can be done using 2 tags <canvas> and <SVG>.

<canvas> Tag:

<canvas> tag is often used to draw graphics on any web page. Canvas is a new html 5 elements. You can make color gradient, rectangle, triangle, circle and many vector drawings from the HTML 5. These elements are only supported by the new web browser like IE 9+, opera, Chrome etc. Indeed, canvas defines rectangular area on a web document. Lets see the syntax of use of <canvas>.

<canvas class="canvasimage" width="250" height="250"></canvas>

You should always define width and height attributes of canvas element. If you don't use these two attributes, there can not draw any images. Multiple canvas tags can be used in a single web document. Most of the attributes which can apply in a text that all can apply in the canvas element.
Example of Canvas element.

<!DOCTYPE html>
<html>
<body>
<canvas  style="border:3px dots #ffffff;" class="canvasid" width="310" height="310">
This text is shown because your browser doesnot support.
</canvas>
</body>
</html>


You also can use the javascript on canvas element. Using javascript, you can give many effects to canvas in web document.

<!DOCTYPE html>
<html>
<body>
<canvas class="canvaselement" width="350" height="155">
I think your browser doesnot support this html 5 tag.
</canvas>
<script type="text/javascript">
var can =document.getElementById("canvaselement");
var ctx=can.getContext("2d");
ctx.fillRect(2,3,125,60);
ctx.fillStyle="#00feef";
</script>
</body>
</html>


Canvas has two coordinates because it is two dimensional grid. We can use these methods to draw straight lines on canvas moveTo(a,b) which defines beginning point of the line and lineTo(a,b) which creates last or end point of the line.
We also write text in the canvas and give the gradients on canvas. Image can be also drawn by using canvas.

I have not written here more examples of canvas elements because you can see any examples from http://www.w3schools.com/html/html5_canvas.asp

<SVG> Tag

Now lets talke about SVG briefly. It stands for scalable vector graphics. Scalable Vector Graphics creates vector shapes for the web document. The main advantage of SVG is that it creates vectors shapes.

By the way there cannot see major differences between SVG and Canvas but there is some difference. Canvas is used to draw 2D graphics and in SVG, the drawn vector shapes are defined as objects.



Tags

0/Post a Comment/Comments

Post a Comment

Previous Post Next Post